27 jQuery & CSS3 Loading Animation and Progress Bar Plugins/Tutorials

Advertisement

Loaders and progress bars are very popular in recents years.Today many web applications and websites use loader animations and progress bars to boost the performance and make them more attractive and stylish.Loading animations and progress bars are really important for users because they signal the user that something is still going on.

In today’s post we have gathered jQuery and pure CSS3 loading animations and progress bars.But make sure that CSS3 animations are not yet supported in old browsers so try modern borwsers to see live action of these plugins.

You may also take a look at our past jQuery tutorials and plugins;

JS Animated Loading Spinner

jquery-loading-animation

This pack is easly customisable, you can change 10 parameters, as radius, size, color, speed, weight, etc in a very easy way.
Source | Demo

 

Percentage Loader

css3 jquery loading animations and progress barsA tiny jQuery plugin for displaying progress in a visual and engaging way
Source | Demo

 

jQuery Circular Progress Bar

css3 jquery loading animations and progress barsAnother progress bar w,th circular shape.
Source | Demo

 

Spin.js

css3 jquery loading animations and progress barsAn animated CSS3 loading spinner.
Source | Demo

 

CSS3 Loading Animation Loop

css3 jquery loading animations and progress barsThree CSS3 animation loop and can be used in preloader for images with jQuery.
Source | Demo

 

CSS3 Loading Animation

css3 jquery loading animations and progress barsAnother CSS3 loading animation with CSS3.
Source | Demo

 

CSS Load

css3 jquery loading animations and progress barsLoading CSS spinners and bars generator for AJAX & JQuery
Source | Demo

 

CanvasLoader Creator

css3 jquery loading animations and progress barsThe Heartcode CanvasLoader Creator is a free online tool which you can use to generate scripted preloaders (spinners or throbblers) for your HTML projects.
Source | Demo

 

The Facebook Loading Animation

css3 jquery loading animations and progress barsFacebook loading animation using CSS3 animations.
Source | Demo

 

Flickr Style Loading Animation Using JQuery

css3 jquery loading animations and progress barsA Flickr like loading animation.
Source | Demo

 

CSS Loading Animation Circle Style

css3 jquery loading animations and progress barsLoading progress using clean CSS3.
Source | Demo

 

CSS3 Loading Spinners Without Images

css3 jquery loading animations and progress barsCreate animated image-less loading spinners such as used in a lot of webapps
Source | Demo

 

Bouncy Animated Loading Animation

css3 jquery loading animations and progress barsA loading animation fron Chris Coyier
Source | Demo

 

Sonic.js

css3 jquery loading animations and progress barsSonic is a quick and tiny class you can use to generate loading indicators of different shapes, colours, speeds etc.
Source | Demo

 

QueryLoader2

css3 jquery loading animations and progress barsQueryLoader2 is simply scanning the given elements for images (and background images) and preloading them before the website is visible.
Source | Demo

 

CSS3 And JQuery Progress Bar

css3 jquery loading animations and progress barsA fancy progress bar using CSS3 and jQuery, but no Flash or even images.
Source | Demo

 

jQuery Progress Bar

css3 jquery loading animations and progress barsWebAppers have created a simple Javascript based Percentage Bar / Progress Bar which is inspired by Bare Naked App.
Source | Demo

 

jQuery Ajax Loader & Spinner

css3 jquery loading animations and progress barsA tutorial for creating on the fly ajax loaders.
Source | Demo

 

Animated jQuery Progressbar Plugin

css3 jquery loading animations and progress barsLearn how to creater an animated progress bar.
Source | Demo

 

Progressbar

css3 jquery loading animations and progress barsThe jQuery UI Progressbar plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures.
Source | Demo

 

Ajax Style Loading Animation in CSS3 ( no Images )

css3 jquery loading animations and progress barsTutorial for creating Ajax style Loading Animation using pure CSS3
Source | Demo

 

Pure CSS Progress Bar

css3 jquery loading animations and progress barsA Progress Bar implemented entirely using CSS 3 gradients, shadows, and border-radius, with a touch of animation.
Source | Demo

 

CSS3 Progress Bars

css3 jquery loading animations and progress barsPure CSS3 progres bars created by Chris Coyier.
Source | Demo

 

jQuery High Quality Loader

css3 jquery loading animations and progress barsBestloader is a plugin for jQuery that lets you to have an high quality loader. This is possible because this isn’t a gif image, but it’s an animated png. Bestloader supports high resolution display, like retina display
Source | Demo

 

The AwsmUploader

css3 jquery loading animations and progress barsIt lets you easily upload files by drag-n-drop with blank JavaScript, HTML5 and PHP on the serverside.
Source | Demo

 

Advanced Progress Loader

css3 jquery loading animations and progress barsAdvanced Progress Loader is fully customizable loader and supports all major browsers.You can easily change radius,thickness,size,speed etc.See the demo.
Source | Demo

 

PageLoading – jQuery Plugin

css3 jquery loading animations and progress barsThis jQuery plugin that will allow you to show a loading view during the loading of a web page.You will be able in a row and some parameters to customize the loading view. It’s colors, loader icon, the background image of the loading view.
Source | Demo

 

Simple Loading Modal

css3 jquery loading animations and progress barsThis plugin creates a simple loading modal. It appears on your website content area and fades away. Simply pass in your element and everything else is taken care of.
Source | Demo