Version: 2.0 |

ProgressBar

in namespace DotVVM.Framework.Controls.Bootstrap4

Renders Bootstrap progress bar.

Properties

Name Type Description Notes Default Value
Color BootstrapColor Gets or sets the contextual color of the control.
attribute
inner element
static value
bindable
default
Primary
HiddenTemplate ITemplate Gets or sets additional hidden information of progress bar.
attribute
inner element
static value
bindable
default
Value Double Gets or sets value of current progress.
attribute
inner element
static value
bindable
default
100
VisualStyle ProgressBarVisualStyle Gets or sets whether the progress bar has solid fill, stripes or animated stripes.
attribute
inner element
static value
bindable
default
Solid

Events

Name Type Description

Usage & Scenarios

Renders Bootstrap Progress Bar widget.

https://getbootstrap.com/docs/4.1/components/progress/

HTML Rendered by the Control

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 StripedAnimated.

<bs:ProgressBar Color="Danger" VisualStyle="Striped" Value="39">
  39%
</bs:ProgressBar>


<bs:ProgressBar Color="Success" VisualStyle="StripedAnimated" 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 ContextualColor Color { get; set; } = ContextualColor.Info;

    public void ChangeWidth()
    {
        var random = new Random();
        Width = random.Next(101);
    }

    public void ChangeColor()
    {
        var colors = Enum.GetValues(typeof(ContextualColor)).Cast<ContextualColor>().ToList();
        var random = new Random();
        var c = random.Next(colors.Count);
        Color = colors[c];
    }
}

Suggestions


Help & Contribute

The documentation is maintained on GitHub.
We'll be happy if you edit the page and create a pull request.

Send message