Animating progress bars to present your skills and services


100% responsive and colorful progress bars to make your website standout


Easy to use settings panel allows to customize the appearance of progress bar

Progress Bar widget, can be used to add animated progress bars to show the progress of a task, project or skill. Following are some use cases:

1. Showing the percentage of expertise you have for certain skills
2. Showing the percentage of the task completion
3. Comparing different attributes over 100% scale etc..

You can customize following attributes of Progress Bar widget:

1. Progress Bar Percentage e.g 50% or 60% etc.
2. Progress Bar Height
3. Progress Bar Color
4. Progress Bar Background Color
5. Border Radius.

Please Note:

Please make sure that each progress bar on the same page has different and unique id (ID can be changed from settings panel of progress bar).

Strips inside progress bar, are designed using css3 styles. So if some older browsers doesn't support those css3 styles then the strips are removed and only base color is shown thus providing a cross browser solution.


Progress bar animation is started on page load which means than if you have progress bars at the bottom of the page then animation will be ended when user will reach that section.

In Safari/iPhones progress bars does not animate due to Safari browser issue. So instead progress bars are static in Safari/iPhones thus covering all browsers and devices.
All in One

Define the progress bar percentage
Define progress bar height
Background color
Define progress bar background color
Bar Color
Define progress bar color
Border radius
Define progress bar border radius.
    No reviews yet.