Default Progress Bar

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%
<dx:BootstrapProgressBar runat="server" Minimum="0" Maximum="100" Position="70">
</dx:BootstrapProgressBar>

Striped

The SettingsBootstrap.Striped property determines whether or not the Progress Bar should display a striped pattern in its filled area.

70%
<dx:BootstrapProgressBar runat="server" Minimum="0" Maximum="100" Position="70">
    <SettingsBootstrap Striped="true" />
</dx:BootstrapProgressBar>

Animated

The pattern displayed by a striped Progress Bar can be animated. To enable animation, set the SettingsBootstrap.Animated property to true.

70%
<dx:BootstrapProgressBar runat="server" Minimum="0" Maximum="100" Position="70">
    <SettingsBootstrap Striped="true" Animated="true" />
</dx:BootstrapProgressBar>

Hide Position Text

To hide text indicating the current position of the progress bar, set the ShowPosition property to false.

<dx:BootstrapProgressBar runat="server" Minimum="0" Maximum="100" Position="70" ShowPosition="false">
</dx:BootstrapProgressBar>
Screen Size
Color Themes
Demo QR Code