27个采用jQuery和CSS3技术的loading载入效果

web2.0时代最大的特征就是各种ajax效果,而loading的各种形式,也广泛应用在各种程序中。收集了使用jquery和css3技术,高端效果非常牛掰的特效,分享给大家。

Percentage Loader

css3 jquery loading animations and progress bars

A tiny jQuery plugin for displaying progress in a visual and engaging way

Source | Demo

jQuery Circular Progress Bar

css3 jquery loading animations and progress bars

Another progress bar w,th circular shape.

Source | Demo

Spin.js

css3 jquery loading animations and progress bars

An animated CSS3 loading spinner.

Source | Demo

CSS3 Loading Animation Loop

css3 jquery loading animations and progress bars

Three CSS3 animation loop and can be used in preloader for images with jQuery.

Source | Demo

CSS3 Loading Animation

css3 jquery loading animations and progress bars

Another CSS3 loading animation with CSS3.

Source | Demo

CSS Load

css3 jquery loading animations and progress bars

Loading CSS spinners and bars generator for AJAX & JQuery

Source | Demo

CanvasLoader Creator

css3 jquery loading animations and progress bars

The 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 bars

Facebook loading animation using CSS3 animations.

Source | Demo

Flickr Style Loading Animation Using JQuery

css3 jquery loading animations and progress bars

A Flickr like loading animation.

Source | Demo

CSS Loading Animation Circle Style

css3 jquery loading animations and progress bars

Loading progress using clean CSS3.

Source | Demo

CSS3 Loading Spinners Without Images

css3 jquery loading animations and progress bars

Create 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 bars

A loading animation fron Chris Coyier

Source | Demo

Sonic.js

css3 jquery loading animations and progress bars

Sonic 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 bars

QueryLoader2 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 bars

A fancy progress bar using CSS3 and jQuery, but no Flash or even images.

Source | Demo

jQuery Progress Bar

css3 jquery loading animations and progress bars

WebAppers 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 bars

A tutorial for creating on the fly ajax loaders.

Source | Demo

Animated jQuery Progressbar Plugin

css3 jquery loading animations and progress bars

Learn how to creater an animated progress bar.

Source | Demo

Progressbar

css3 jquery loading animations and progress bars

The 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 bars

Tutorial for creating Ajax style Loading Animation using pure CSS3

Source | Demo

Pure CSS Progress Bar

css3 jquery loading animations and progress bars

A 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 bars

Pure CSS3 progres bars created by Chris Coyier.

Source | Demo

jQuery High Quality Loader

css3 jquery loading animations and progress bars

Bestloader 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 bars

It 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 bars

Advanced 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 bars

This 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 bars

This 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

发表新评论