Simple Small Progress Percentage Bar Using Custom CSS and jQuery

Small and easily customizable percentage progress bar can be help full in some cases when you want to show quick inline graphs or data notations. If the requirement is simple, we can’t proffer heavy libraries. For the same reason, I have written a small jQuery function to draw an animated progress bar. I have added some custom option which user can easily change in HTML attribute it self.

We can change Height, Width, Background or Bar color, Speed of animation. You can suggest me if other features can be added.

See working Demo here


Let’s begin implementation.✌

Step 1) We need to include a jQuery library on our page.


Step 2) Add CSS styling.


Step 3) Custom jQuery function which will be called on page load. The code is simple and self-explanatory. This code is iterating all wrappers with selector class “.progress-wrap”. It will get respective HTML attribute option and implement on page load.


Step 4) Finally HTML structure which we need to include.

In HTML we can add options as per requirements.

Complete final HTML will look something like this.



Leave a Reply

Notify of