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.

25%

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.

15%
25%
30%

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.

Step 1
Step 2
Step 3
2024 © Velzon.
Design & Develop by Themesbrand