Default ProgressBar

This example demonstrates the Bootstrap Progress Bar control with default settings. By default, the Progress Bar control displays the status of a process in percent.

70%
@(Html.DevExpress()
    .BootstrapProgressBar("ProgressBarDefault")
    .Minimum(0)
    .Maximum(100)
    .Position(70)
)

Striped

The Striped method (available through SettingsBootstrap) specifies whether or not the Progress Bar should display a striped pattern in its filled area.

70%
@(Html.DevExpress()
    .BootstrapProgressBar("StripedProgressBar")
    .Minimum(0)
    .Maximum(100)
    .Position(70)
    .SettingsBootstrap(settings=>
        settings.Striped(true))
)

Animated

The pattern displayed by a striped Progress Bar can be animated. To enable animation, pass true to the Animated method (available through SettingsBootstrap).

70%
@(Html.DevExpress()
    .BootstrapProgressBar("AnimatedProgressBar")
    .Minimum(0)
    .Maximum(100)
    .Position(70)
    .SettingsBootstrap(settings => {
        settings.Striped(true);
        settings.Animated(true);
        })
)

Hide Position Text

To hide text indicating the current position of the progress bar, call the ShowPosition method with the false parameter.

@(Html.DevExpress()
    .BootstrapProgressBar("HidePositionTextProgressBar")
    .Minimum(0)
    .Maximum(100)
    .Position(70)
    .ShowPosition(false)
)
Screen Size
Color Themes
Demo QR Code