Progress
Use the custom progress component to display simple or complex progress bars. We need inline css when using progress bars. Click for Documentation
-
We use the
.progress
as a wrapper to indicate the max value of the progress bar. -
We use the inner
.progress-bar
to indicate the progress so far. -
The
.progress-bar
requires an inline style, utility class, or custom CSS to set their width. -
The
.progress-bar
also requires somerole
andaria
attributes to make it accessible.
Add a .progress-bar-striped
class to a .progress-bar
to add a gradient line to the progress bar.
Add a .progress-bar-striped
class to a .progress-bar
to add a gradient line to the progress bar.
Add multiple progress bars into a progress component.
Insert text into the progress bar.
Insert text into the progress bar.