ProgressBar
in namespace DotVVM.Framework.Controls.Bootstrap4
Renders Bootstrap progress bar.
Usage & Scenarios
Renders Bootstrap Progress Bar widget.
Sample 1: Basic Progress Bar
The ProgressBar control has the Value property that sets value between 0 and 100.
Contextual color of ProgressBar can be set with Color property.
To show ProgressBar custom text or label, place it inside the control. Default label is blank.
It is also possible to have hidden label in progress bar with HiddenTemplate element. This content is wrapped in sr-only CSS class to be read by screen readers.
<bs:ProgressBar Value="25">
25% completed...
</bs:ProgressBar>
<bs:ProgressBar Color="Info" Value="85">
<HiddenTemplate>
69% completed...
</HiddenTemplate>
</bs:ProgressBar>
Sample 2: Striped and Animated Progress Bars
You can set ProgressBar to have various skins using the VisualStyle property - the options are Solid, Striped or AnimatedStriped.
<bs:ProgressBar Color="Danger" VisualStyle="Striped" Value="39">
39%
</bs:ProgressBar>
<bs:ProgressBar Color="Success" VisualStyle="AnimatedStriped" Value="100">
COMPLETED
</bs:ProgressBar>
Sample 3: Stacked Progress Bar
You can create Bootstrap stacked ProgressBars using StackedProgressBar control.
<bs:StackedProgressBar>
<bs:ProgressBar Color="Success" Value="25">
25%
</bs:ProgressBar>
<bs:ProgressBar Color="Info" Value="25">
25%
</bs:ProgressBar>
<bs:ProgressBar Color="Warning" Value="11">
11%
</bs:ProgressBar>
<bs:ProgressBar Color="Danger" Value="14">
14%
</bs:ProgressBar>
</bs:StackedProgressBar>Sample 4: ProgressBar - Bindings
The Value and Color properties of ProgressBar are bindable.
<bs:ProgressBar Value="{value: Width}" Color="{value: Color}">
{{value: Width}}%
</bs:ProgressBar>
<dot:Button Text="Change width" Click="{command: ChangeWidth()}" />
<dot:Button Text="Change color" Click="{command: ChangeColor()}" />public class ViewModel : DotvvmViewModelBase
{
public double Width { get; set; } = 95;
public BootstrapColor Color { get; set; } = BootstrapColor.Info;
public void ChangeWidth()
{
var random = new Random();
Width = random.Next(101);
}
public void ChangeColor()
{
var colors = Enum.GetValues(typeof(BootstrapColor)).Cast<BootstrapColor>().ToList();
var random = new Random();
var c = random.Next(colors.Count);
Color = colors[c];
}
}
Properties
| Name | Type | Description | Notes | Default Value | |
|---|---|---|---|---|---|
 |
ClientIDMode | ClientIDMode | Gets or sets the client ID generation algorithm. |
attribute
static value
|
Static |
|
Color | BootstrapColor | Gets or sets the contextual color of the control. |
attribute
static value
bindable
|
Primary |
|
DataContext | Object | Gets or sets a data context for the control and its children. All value and command bindings are evaluated in context of this value. The DataContext is null in client-side templates. |
attribute
bindable
|
null |
|
HiddenTemplate | ITemplate | Gets or sets additional hidden information of progress bar. |
inner element
static value
|
null |
|
ID | String | Gets or sets the control client ID within its naming container. |
attribute
static value
bindable
|
null |
|
IncludeInPage | Boolean | Gets or sets whether the control is included in the DOM of the page. |
attribute
bindable
|
True |
|
InnerText | String | Gets or sets the inner text of the HTML element. Note that this property can only be used on HtmlGenericControl directly and when the control does not have any children. |
attribute
static value
bindable
|
null |
|
Value | Double | Gets or sets value of current progress. |
attribute
static value
bindable
|
100 |
|
Visible | Boolean | Gets or sets whether the control is visible. When set to false, `style="display: none"` will be added to this control. |
attribute
bindable
|
True |
|
VisualStyle | ProgressBarVisualStyle | Gets or sets whether the progress bar has solid fill, stripes or animated stripes. |
attribute
static value
bindable
|
Solid |