Monday , 23 October 2017
Home » Coding » JavaScript » 24 Free jQuery CSS3 Progress Bar Plugins
circular progress bar

24 Free jQuery CSS3 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. Must see our topic on 12 Best HTML5 jQuery File Upload Scripts which suits with this progress bar codes. HTML, CSS3 and jQuery codes are included for all these scripts.

Also take a look at related articles:

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.

DemoDownload

avatar progress bar

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.

DemoDownload

number progress bar in jquery css3

Circular Progress Bar

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

Demo|Download

circular progress bar

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

checkout progress bar

Pixel Progress Bar

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

Download

pixel bar

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.

Demo|Download

Pace page load progress bar

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.

Demo|Download

css progress

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.

Demo|Download

goal progress bar

 

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.

Demo|Download

progress button styles

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.

Demo|Download

progress-js

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.

Demo|Download

ngprogress

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 demonstrate the capabilities CSS3 in modern web browsers, and as such this progress bar is styled entirely using CSS.

Demo|Download

pure css bar

 

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

nprogress

Circular Progress

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

Download

circualar progress

 

Nanobar.js

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

Demo|Download

nanobar

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.

Demo|Download

angular loading bar

 

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.

Demo|Download

percentage jQuery loader

Free Circular Progress Bar – jQuery plugin

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

Demo / Download

Circular Progress Bar - jQuery plugin

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.

Demo|Download

Super Simple Progress Bar

CSS 5 steps progress bar

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

Demo|Download

CSS 5 steps progress bar

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.

Demo|Download

jQuery Progress bar profile completion

jQuery Image Preloader Progress Bar

Progress bar with changeable skins showing page load percentage.

Demo|Download

Image Preloader Progress Bar

jQuery Form Progress Bar

Simple form progress bar. Inspiration from dribbble.

Demo|Download

Form Progress Bar

Free YouTube Progress Bar

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

Demo|Download

youtube

 

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.

Video Demo|Download

premium loading bars

About Allie Kingsley

Allie Kingsley is a social media manager for designscrazed. She is crazy about new gadgets and up to date with latest technology trends. Use comments to notify any issues you are facing.

Check Also

onepage-cart-plugin

19 Best Online Shopping Cart Plugins

Online stores have grown to a extreme level these last few years as we grow …

3 comments

  1. All widgets.Unbeliavable beautifull.thanks.

  2. Jason DeWalt

    This is a great resource. I really like the simplicity of these, yet they are still stylish. Thanks!

  3. wonderful collection…thanks for sharing…:)

Leave a Reply

Your email address will not be published. Required fields are marked *