Progress
Default Progress
A Default Progress Example.
Progress with background color
Use color="Required Color"
attribute to
progress bar class with the below-mentioned color variation
to set the background color progress bar.
Progress with Label
Add labels to your progress bars by placing text within the progress-bar.
Multiple Bars
Multiple bar color to change the appearance of individual progress bars.
Height
Use progress-sm
,
progress-lg
, or
progress-xl
class to set the different heights
of progress.
Small Progress
Default Progress
Large Progress
Extra Large Progress
Striped Progress
Use striped
attribute to add strip to the
progress.
Animated Striped Progress
Use striped animated
attribute to add strip
with animation to the progress.
Gradient Progress
Use bg-gradient
class to show gradient progress
bar.
Animated Progress
Use animated-progess
class to show progress
with animation.
Custom Progress
Use animated-progess custom-progess
class
to show custom progress with animation.
Custom Progress with Label
Use animated-progess custom-progess progress-label
class to show custom progress with animation and label.
Content Progress
Example of progress with content wrapped in progress.
30% Update in progress...
1 min left
60% Update in progress...
45s left
82% Update in progress...
25s left
Progress with Steps
Here is the example of progress which is represented by steps completion.
Step Progress with Arrow
Use progress-step-arrow
class to create
step progress with an arrow.