Sometimes you want to show your users a progress or a completion of some kind. That's where a ProgressBar comes in handy.
In the simplest case you only need to provide the value the ProgressBar should present. It will then be rendered with the primary look, ranging between 0 and 100, showing the bar completion as a percentage.
Like other components, easily make a ProgressBar more meaningful to a particular context by adding a look attribute with values primary, success, info, warning or danger.
You can always provide your own caption instead of using the standard percentage or simply hide the caption, if you want a pure ProgressBar.
If you use the standard caption, you can also configure the amount of shown fraction digits.
Instead 0 and 100 you can use any integer values as boundaries.
You don't need to calculate the desired completion percentage yourself, just drop a value that lies between your defined range.
Striped ProgressBars can be used to indicate a long running action, that was already finished or aborted.
Uses a gradient to create a striped effect. Not available in IE9 and below.
If you want to indicate a currently running action, it's much more untuitive to make your ProgressBar move a bit.
Making a ProgressBar animated automatically applies stripes to it (otherwise there would be nothing to see). Thus this is also not available in IE9 and below.
You can use all the attributes controlling the responsive behaviour of <b:column />
also with <b:progressBar />:
You can play also with col-*-*, visible and hidden attribute, as any bootstrap elements. For example:
<b:progressBar /> supports tooltips:
| Attribute | Default value | Description |
|---|---|---|
| animated | false | If true, stripes will be added and animated to move from right to left to indicate running actions. Default value: false. |
| auto-update autoUpdate (alternative writing) |
false | Setting this flag updates the widget on every AJAX request. |
| caption | (none) | Optional caption to change the text, which is shown on the progress bar. Default is the progressbar completion in percent. |
| col-lg colLg (alternative writing) |
-1 | Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| col-md colMd (alternative writing) |
-1 | Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| col-sm colSm (alternative writing) |
-1 | Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| col-xs colXs (alternative writing) |
-1 | Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| content-class contentClass (alternative writing) |
(none) | Style class of the inner div (which defines the length of the progress bar). |
| content-style contentStyle (alternative writing) |
(none) | Inline CSS style of the inner div (which defines the length of the progress bar). |
| display | block | If you use the "visible" attribute, the value of this attribute is added. Legal values: block, inline, inline-block. Default: block. |
| hidden | (none) | This column is hidden on a certain screen size and below. Legal values: lg, md, sm, xs. |
| id | (none) | Unique identifier of the component in a namingContainer. |
| large-screen largeScreen (alternative writing) |
-1 | Alternative spelling to col-lg. Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| look | (none) | Look of the ProgressBar, can be info, success, warning, or danger. If not specified, a blue bar will be rendered. |
| max | 100 | The maximum value of the ProgressBar. (default 100) |
| max-decimal-places maxDecimalPlaces (alternative writing) |
2 | The maximal number of fraction digits, which should be used to show the default caption. Set to 0 to show integer numbers only. |
| medium-screen mediumScreen (alternative writing) |
-1 | Alternative spelling to col-md. Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| min | 0 | The minimum value of the ProgressBar. (default 0) |
| offset | (none) | Integer value to specify how many columns to offset. |
| offset-lg offsetLg (alternative writing) |
(none) | Integer value to specify how many columns to offset. |
| offset-md offsetMd (alternative writing) |
(none) | Integer value to specify how many columns to offset. |
| offset-sm offsetSm (alternative writing) |
(none) | Integer value to specify how many columns to offset. |
| offset-xs offsetXs (alternative writing) |
(none) | Integer value to specify how many columns to offset. |
| render-caption renderCaption (alternative writing) |
true | If true, the caption will be shown. Set this to false if you don't want the progress bar to show any value or text. Default value: true |
| rendered | false | Boolean value to specify the rendering of the component, when set to false the component will not be rendered. |
| small-screen smallScreen (alternative writing) |
-1 | Alternative spelling to col-sm. Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| span | (none) | Integer value to specify how many columns to span on medium screens (≥992 pixels). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| striped | false | If true, stripes will be added to the ProgressBar's look. Default value: false. |
| style | (none) | Inline style of the input element. |
| style-class styleClass (alternative writing) |
(none) | Style class of the input element. |
| tiny-screen tinyScreen (alternative writing) |
-1 | Alternative spelling to col-xs. Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| tooltip | (none) | The text of the tooltip. |
| tooltip-container tooltipContainer (alternative writing) |
body | Where is the tooltip div generated? That's primarily a technical value that can be used to fix rendering errors in special cases. Also see data-container in the documentation of Bootstrap. The default value is body. |
| tooltip-delay tooltipDelay (alternative writing) |
0 | The tooltip is shown and hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay). |
| tooltip-delay-hide tooltipDelayHide (alternative writing) |
0 | The tooltip is hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay). |
| tooltip-delay-show tooltipDelayShow (alternative writing) |
0 | The tooltip is shown with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay). |
| tooltip-position tooltipPosition (alternative writing) |
(none) | Where is the tooltip to be displayed? Possible values: "top", "bottom", "right", "left", "auto", "auto top", "auto bottom", "auto right" and "auto left". Default to "bottom". |
| value | (none) | The value the ProgressBar should indicate. See the label attribute, if the exact value should be shown in text form. |
| visible | (none) | This column is shown on a certain screen size and above. Legal values: lg, md, sm, xs. |
progressBar is enclosed in a div bearing the CSS-class progress.div itself bearing the CSS-class progress-bar.
progress-bar-{look} where {look} may be primary, info, success, warning or danger.progress-bar-striped.active and progress-bar-striped.sr-only