Projects
24 Total
Integration with API
Development Project
Customers
12 Total
John Mayers
Thomas Mullier
Kim Collins
Files
17 Total
WorkNote.txt
Video.avi
UserTable.sql
wedding.jpg
No files were found. Try changing your query...

###### Examples of Progress Bars

##### Progress

Use our custom progress component for displaying simple or complex progress bars. Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.

- 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 some `role` and `aria` attributes to make it accessible.

Learn more about Bootstrap progress bars by Clicking here. Put that all together, and you have the following examples.

##### Labels

Add labels to your progress bars by placing text within the `.progress-bar`
25%

##### Backgrounds

Use background utility classes to change the appearance of individual progress bars.

##### Multiple Bars

Include multiple progress bars in a progress component if you need.

##### Striped

Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar’s background color.

##### Custom Made

We've also created our own progress bar type with multiple progress levels inside with ability to add progress information and labels.
Progress+12
72/100
Progress+12
72/100
Progress+12
72/100
Progress+12
72/100
Dark Colors
Customizer
Menu Settings
Menu Position
Menu Style
With Image
Menu Color
Sub Menu
Sub Menu Style
Sub Menu Color
Other Settings
Full Screen?
Show Top Bar
Above Menu?
Top Bar Color
Demo Chat

###### John Mayers

Account Manager
Hi, how can I help you?
Mon 10:20am
Hi, my name is Mike, I will be happy to assist you
Hi, I tried ordering this product and it keeps showing me error code.
Attach Document Insert Photo Upload Video