ProgressBar since 0.8.5

Sometimes you want to show your users a progress or a completion of some kind. That's where a ProgressBar comes in handy.

Basic usage

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.

50%

Contextual alternatives

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.

100%
90%
80%
70%
60%

Labels

You can always provide your own caption instead of using the standard percentage or simply hide the caption, if you want a pure ProgressBar.

This bar is half done.
50%

If you use the standard caption, you can also configure the amount of shown fraction digits.

33.33%
33.333333%
33%

Custom ranges

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.

33.33%
100%

Striped

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.

100%

Animated

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.

100%
75%

Responsive design since 0.9.0

You can use all the attributes controlling the responsive behaviour of <b:column /> also with <b:progressBar />:

50%
50%
50%
50%
50%
50%
50%

Visibility depending on screen size since 0.8.6/0.9.0

You can play also with col-*-*, visible and hidden attribute, as any bootstrap elements. For example:


Visible on >= md:
50%
Visible on <= sm:
50%
Visible on sm...lg:
50%
Visible on xs and md:
50%
Col-md-6, offset 2:
50%

Tooltips

<b:progressBar /> supports tooltips:


50%

Reference section

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.
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.
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.
  • The entire progressBar is enclosed in a div bearing the CSS-class progress.
  • The actual bar, that shows the current progress is a div itself bearing the CSS-class progress-bar.
    • If the bar has a custom look, this div additionally contains the class progress-bar-{look} where {look} may be primary, info, success, warning or danger.
    • If the bar is striped, this div additionally contains the class progress-bar-striped.
    • If the bar is animated, this div additionally contains the class active and progress-bar-striped.
  • The bar's caption is held inside a span with no class, if it is hidden, if bears the CSS-class sr-only