forked from varia/varia.website
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
141 lines
2.4 KiB
141 lines
2.4 KiB
7 years ago
|
Progress bars
|
||
|
|
===============================================================================
|
||
|
|
.. lead:: Provide up-to-date feedback on the progress of a workflow or action
|
||
|
|
with simple yet flexible progress bars.
|
||
|
|
.. ----------------------------------------------------------------------------
|
||
|
|
|
||
|
|
.. callout:: danger
|
||
|
|
|
||
|
|
:h4:`Cross-browser compatibility`
|
||
|
|
Progress bars use CSS3 transitions and animations to achieve some of their
|
||
|
|
effects. These features are not supported in Internet Explorer 9 and below
|
||
|
|
or older versions of Firefox. Opera 12 does not support animations.
|
||
|
|
|
||
|
|
|
||
|
|
Basic example
|
||
|
|
-------------
|
||
|
|
|
||
|
|
Default progress bar.
|
||
|
|
|
||
|
|
.. container:: bs-example
|
||
|
|
|
||
|
|
.. progress:: 60%
|
||
|
|
|
||
|
|
.. code::
|
||
|
|
:class: highlight
|
||
|
|
|
||
|
|
.. progress:: 60%
|
||
|
|
|
||
|
|
|
||
|
|
With label
|
||
|
|
----------
|
||
|
|
|
||
|
|
Remove the `.sr-only` class from within the progress bar to show a visible
|
||
|
|
percentage. For low percentages, consider adding a `min-width` to ensure the
|
||
|
|
label's text is fully visible.
|
||
|
|
|
||
|
|
.. container:: bs-example
|
||
|
|
|
||
|
|
.. progress:: 60%
|
||
|
|
:label: 60%
|
||
|
|
|
||
|
|
.. code::
|
||
|
|
:class: highlight
|
||
|
|
|
||
|
|
.. progress:: 60%
|
||
|
|
:label: 60%
|
||
|
|
|
||
|
|
|
||
|
|
Contextual alternatives
|
||
|
|
-----------------------
|
||
|
|
|
||
|
|
Progress bars use some of the same button and alert classes for consistent
|
||
|
|
styles.
|
||
|
|
|
||
|
|
.. container:: bs-example
|
||
|
|
|
||
|
|
.. progress:: 40%
|
||
|
|
:class: success
|
||
|
|
|
||
|
|
.. progress:: 20%
|
||
|
|
:class: info
|
||
|
|
|
||
|
|
.. progress:: 60%
|
||
|
|
:class: warning
|
||
|
|
|
||
|
|
.. progress:: 80%
|
||
|
|
:class: danger
|
||
|
|
|
||
|
|
.. code::
|
||
|
|
:class: highlight
|
||
|
|
|
||
|
|
.. progress:: 40%
|
||
|
|
:class: success
|
||
|
|
|
||
|
|
.. progress:: 20%
|
||
|
|
:class: info
|
||
|
|
|
||
|
|
.. progress:: 60%
|
||
|
|
:class: warning
|
||
|
|
|
||
|
|
.. progress:: 80%
|
||
|
|
:class: danger
|
||
|
|
|
||
|
|
|
||
|
|
Striped
|
||
|
|
-------
|
||
|
|
|
||
|
|
Uses a gradient to create a striped effect. Not available in IE8.
|
||
|
|
|
||
|
|
.. container:: bs-example
|
||
|
|
|
||
|
|
.. progress:: 40%
|
||
|
|
:class: success striped
|
||
|
|
|
||
|
|
.. progress:: 20%
|
||
|
|
:class: info striped
|
||
|
|
|
||
|
|
.. progress:: 60%
|
||
|
|
:class: warning striped
|
||
|
|
|
||
|
|
.. progress:: 80%
|
||
|
|
:class: danger striped
|
||
|
|
|
||
|
|
.. code::
|
||
|
|
:class: highlight
|
||
|
|
|
||
|
|
.. progress:: 40%
|
||
|
|
:class: success striped
|
||
|
|
|
||
|
|
.. progress:: 20%
|
||
|
|
:class: info striped
|
||
|
|
|
||
|
|
.. progress:: 60%
|
||
|
|
:class: warning striped
|
||
|
|
|
||
|
|
.. progress:: 80%
|
||
|
|
:class: danger striped
|
||
|
|
|
||
|
|
|
||
|
|
Animated
|
||
|
|
--------
|
||
|
|
|
||
|
|
Add `.active` to `.progress-striped` to animate the stripes right to left. Not
|
||
|
|
available in IE9 and below.
|
||
|
|
|
||
|
|
.. container:: bs-example
|
||
|
|
|
||
|
|
.. progress:: 45%
|
||
|
|
:class: active
|
||
|
|
|
||
|
|
.. code::
|
||
|
|
:class: highlight
|
||
|
|
|
||
|
|
.. progress:: 45%
|
||
|
|
:class: active
|
||
|
|
|
||
|
|
Stacked
|
||
|
|
-------
|
||
|
|
|
||
|
|
:text-muted:`N/A`
|