3:35 PM
22 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:
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.
Demo|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.
Demo|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.
Demo|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.
Demo|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.
Demo|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.
Demo|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 demonstrate the capabilities CSS3 in modern web browsers, and as such this progress bar is styled entirely using CSS.
Demo|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.
Demo|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.
Demo|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.
Demo|Download
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
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
CSS 5 steps progress bar
CSS only progress bar in 5 steps. JS is only used for animating the demo.
Demo|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.
Demo|Download
jQuery Image Preloader Progress Bar
Progress bar with changeable skins showing page load percentage.
Demo|Download
jQuery Form Progress Bar
Simple form progress bar. Inspiration from dribbble.
Demo|Download
0 comments:
Post a Comment