24 CSS Progress Bar Plugins

jQuery is a set of libraries for JavaScript which let you do the front end development of elements like progress bar, drop down list very easily. Here you will find JavaScript and jQuery codes which you can use in your website to show the loading of your downloads, uploads or any task completion. These below scripts are all free to download.

jQuery and JavaScript might not support old browsers but all modern browser are equipped with full support of the duo. Stay tuned for next topic on pure CSS progress bars with nothing other than html and CSS codes making them globally usable on all browsers. HTML, CSS3 and jQuery codes are included for all these scripts.

Also take a look at related articles:

• 20 Free Responsive jQuery Image Sliders
• 12 Best HTML5 jQuery File Upload Scripts

Round Avatar with circular progress bar

Adding progress bar on mouse click is something different and this jQuery plugin does just hat. Make your team progress bar which will show a skill percentage on the avatar on click and this percentage can be set in html file.

Download

Cool Number Progress bar

This is a visually appealing progress bar showing a number in your html templates and it will look great on any design. There is no percentage character but you can add it easily with a paragraph “p” tag right after the progress tag used in this download file.

Download

Circular Progress Bar

A circular animation with controllable progress bar can be used in your web design projects.

Download

Checkout Progress Bar

A responsive css progress bar with a nice fluid display with five steps of payment and signup completion for the year 2014.

Download

Pixel Progress Bar

A bit with square shape at the progressing tip of the animation makes this progress bar much more attractive.

Download

Pace – Automatic page load progress bar

An automatic web page progress bar. Include pace.js and a theme of your choice to your page and you are done! Pace will automatically monitor your Ajax requests, event loop lag, document ready state and elements on your page to decide on the progress.

Download

Buttons With Built-in Progress Meters

These will be perfect for displaying progress while submitting forms or loading content via AJAX. They will also use CSS3 styles and transitions to make them easy to customize.

Download

Animated Goal Progress Bar jQuery plugin

This plugin allows you to create an animated progress bar using jQuery. Just fill in the required input and the plugin calculates the progress of your goal and animates the bar. You can specify text to put before and after the amount raised.

Download

Free progress button styles

A set of flat and 3D progress button styles where the button itself serves as a progress indicator. 3D styles are used for showing the progress indication on one side of the button while rotating the button in perspective.

Download

ProgressJs – Themeable progress bar library

ProgressJs is a JavaScript and CSS3 library which helps developers create and manage progress bars for every object on the page.

Download

ngProgress – Youtube Style Bar

ngProgress is a provider for angular for showing a loading status of something. Use cases can be fetching external resources, showing a action taking more-than-normal length or simple loading between the page views. Prefereble, only for resource heavy sites.

Download

Pure CSS Progress Bar

A Progress Bar implemented entirely using CSS 3 gradients, shadows, and border-radius, with a touch of animation. The purpose of this project is to Downloadnstrate the capabilities CSS3 in modern web browsers, and as such this progress bar is styled entirely using CSS.

Download

NProgress – Slim Progress bar

A nanoscopic progress bar. Featuring realistic trickle animations to convince your users that something is happening!  Inspired by Google, YouTube, and Medium.

Download

Circular Progress

A JavaScript circular progress widget, dependency-free and configurable.

Download

Nanobar.js

Very very lightweight progress bars (~730 bytes gzipped). No jQuery needed.

Download

Angular-loading-bar

The idea is simple: Add a loading bar / progress bar whenever an XHR request goes out in angular. Multiple requests within the same time period get bundled together such that each response increments the progress bar by the appropriate amount.

Download

Free jQuery Percentage Loader

jQuery.PercentageLoader is a jQuery plugin for displaying a progress widget in more visually striking way than the ubiquitous horizontal progress bar / textual counter. The plugin takes miniminal installation and is simple and flexibile to use. It makes use of HTML 5 canvas for a rich graphical appearance with only a 10kb (minified) javascript file necessary (suggested web font optional). It uses vectors rather than images so can be easily deployed at various sizes by simply adjusting the initial parameters.

Download

Free Circular Progress Bar – jQuery plugin

A circle running progress bar with unlimited options to control the flow of wither downloads or uploads.

Download / Download

Simple Free jQuery CSS3 Progress Bar

This progress bar uses the HTML5 custom data-* attribute to allow for quick updating to a progress bar animated by Zepto (or jQuery). The animation is wrapped in a window.resize function to reanimate if the browser size is changed.

Download

CSS 5 steps progress bar

CSS only progress bar in 5 steps. JS is only used for animating the Download.

Download

jQuery Progress bar profile completion

Using a progress element for a profile completion bar. Added click states to see desired behavior; in the wild the user would click a “save” or “next” button which would animate the progress bar accordingly.

Download

jQuery Image Preloader Progress Bar

Progress bar with changeable skins showing page load percentage.

Download

jQuery Form Progress Bar

Simple form progress bar. Inspiration from dribbble.

Download

Free YouTube Progress Bar

The progress bar was only visible in one single browsing session, I assume it was an A/B test.

Download

Flat Pie Charts and Progress Bars Templates ( Cost : $6)

Animated flat pie charts progress bars with description and value. Can be used for interactive infographics on your website, Adobe Muse project or iBooks. You can easy edit font, colors and values. Files a fully editable within Adobe Edge CC.

Download