It'is always nice to show you are making progress. And with this extension, this just becomes even nicer. With up to 3 different styles and 38 effects to choose from and no limits in customization. This is the ideal progress bar for your website.
Document Ready
The below progress bars are loaded when the webpage is ready for manipulation. Use the refresh function to see them all load. If you do not scroll your mouse(or swipe) during refreshing of the page then the page will be loaded at the spot you were before pressing refresh!
Horizontal Progress Bar |
||
| Single Color + Automatic Percentage | Single Color + Automatic Number | Single Color + Custom Text |
| |
|
|
| Multi Color + Automatic Percentage | Multi Color + Automatic Number | Multi Color + Custom Text |
| |
|
|
Circle Progress Bar |
||
| Single Color + Automatic Percentage | Single Color + Automatic Number | Single Color + Custom Text |
| |
|
|
| Multi Color + Automatic Percentage | Multi Color + Automatic Number | Multi Color + Custom Text |
| |
|
|
Half Circle Progress Bar |
||
| Single Color + Automatic Percentage | Single Color + Automatic Number | Single Color + Custom Text |
| |
|
|
| Multi Color + Automatic Percentage | Multi Color + Automatic Number | Multi Color + Custom Text |
| |
|
|
On Click
The below progress bars are loaded when the user clicks on the element. The user can define his/her own HTML & CSS to style the element that is visible before the user clicks on it. So this can become a button, image or anything the user can come up with.
| |
|
|
| All items shown in the Document Ready function can also be used in this function. | ||
On Click (External Element)
The below progress bars are loaded when the user clicks on a external element. The user can define his/her own HTML & CSS to style the element that is visible before the user clicks on it. This allows multiple progress bar to be loaded when clicking on a single element.
| Single Color + Automatic Percentage | Single Color + Automatic Number | Single Color + Custom Text |
| |
|
|
| Multi Color + Automatic Percentage | Multi Color + Automatic Number | Multi Color + Custom Text |
| |
|
|
| All items shown in the Document Ready function can also be used in this function. | ||
In View
The below progress bars are loaded when the user scrolled the elements into view.
| |
|
|
| All items shown in the Document Ready function can also be used in this function. | ||