Edit on Github

ProgressBar

in namespace DotVVM.Framework.Controls.Bootstrap

Renders Bootstrap progress bar.

Usage & Scenarios

Renders Bootstrap Progress Bar widget.

https://getbootstrap.com/docs/3.3/components/#progress

Sample 1: Basic Progress Bar

The ProgressBar control has Value property that sets value of current progress. 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.

<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 striped design with IsStriped property.

Is is also possible to animate ProgressBar with IsAnimated property.

<bs:ProgressBar Color="Danger" IsStriped="true" Value="39">
  39%
</bs:ProgressBar>


<bs:ProgressBar Color="Success" IsStriped="true" IsAnimated="true" 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

All properties in ProgressBar are bindable.

  <bs:ProgressBar Value="{value: Width}" Color="{value: Color}" IsStriped="{value: Striped}" IsAnimated="{value: Animated}">
    {{value: Width}}%
  </bs:ProgressBar>

<dot:Button Text="Change width" Click="{command: ChangeWidth()}" />
<dot:Button Text="Change color" Click="{command: ChangeColor()}" />
<dot:Button Text="Change striped" Click="{command: ChangeStriped()}" />
<dot:Button Text="Change animated" Click="{command: ChangeAnimated()}" />
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using DotVVM.Framework.Controls.Bootstrap;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.bootstrap.ProgressBar.sample4
{
    public class ViewModel : DotvvmViewModelBase
    {
        public double Width { get; set; } = 95;
        public ContextualColor Color { get; set; } = ContextualColor.Info;
        public bool Striped { get; set; } = true;
        public bool Animated { get; set; } = true;

        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];
        }

        public void ChangeStriped()
        {
            Striped = !Striped;
        }

        public void ChangeAnimated()
        {
            Animated = !Animated;
        }
    }
}

Properties

Name Type Description Notes Default Value
property icon Color ContextualColor Gets or sets contextual color.
attribute
inner element
static value
bindable
default
 Default
property icon HiddenTemplate ITemplate Gets or sets additional hidden information of progress bar.
attribute
inner element
static value
bindable
default
 null
property icon IsAnimated Boolean Gets or sets if progress bar is animated.
attribute
inner element
static value
bindable
default
 False
property icon IsStriped Boolean Gets or sets if progress bar is striped.
attribute
inner element
static value
bindable
default
 False
property icon Value Double Gets or sets value of current progress.
attribute
inner element
static value
bindable
default
 100

HTML produced by the control

Information about cookies

We use cookies to analyze our traffic, personalize content and ads, and to provide some social media features. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services.

Edit options

Information about cookies

We use cookies to analyze our traffic, personalize content and ads, and to provide some social media features. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services.

Choose which cookies you want to enable

Necessary cookies Always allowed

Necessary cookies are essential and maintain information based on your activity on our site, like remembering your signed in account, selection of your language, or products added to the shopping cart. The website cannot work properly without these cookies.

Google Analytics

We use these cookies to measure, collect, analyse and report how users interact with our sites to better understand their behavior. Thanks to this, we can improve the site and provide better experience. The analytics service is provided by Google Inc.

Google Ads

We use these cookies to measure conversions from our advertisement and banners distributed via Google Ads. This allows us to better target the ads and make them more relevant to you.

Facebook Pixel

We use these cookies to measure conversions from our advertisement and banners distributed via Facebook. This allows us to better target the ads and make them more relevant to you.

Smartlook

We use these cookies to measure, collect, analyse and report how users interact with our sites to better understand their behavior. Thanks to this, we can improve the site and provide better experience. The analytics service is provided by Smartlook.

Google ads user data

Google ads ad personalization