JavaScriptBank.com đã từng giới thiệu đến bạn nhiều hiệu ứng tạo thanh tiến trình tải trang web như:
- Thanh tiến trình tải với JavaScript: Hướng dẫn và Mã nguồn
- Khung hiển thị tiến trình tải với jQuery

Hôm nay, trong bài viết này, JavaScriptBank.com hân hạnh giới thiệu thêm 20 hiệu ứng để tạo thanh tiến trình tải trang, báo cho người sử dụng biết website đang xử lý các truy vấn theo một phong cách rất độc đáo và tương tác.

• Demo
• Phóng to
• Tải lại
• Cửa sổ mới

---

Javascript - VML & Canvas

I found total of 5 JavaScript that generate loading animation. Unfortunately, not all of them can work in older browsers such as IE6, 7 and 8. However I found two Javascripts - activity indicator and spin.js that support both VML (IEs support) and Canvas (Modern browsers).

Activity Indicator

A jQuery plugin that renders a translucent activity indicator (spinner) using SVG or VML. This work almost the same with spin.js except it relies on jQuery.

• Lightweight script
• Resolution independent
• Alpha transparency
• Highly configurable appearance
• Works in all major browsers
• Uses feature detection
• Degrades gracefully

Canvas Loader

This plugin replaces typical animated gif loading image with a canvas based loader of the same width and height. This is super helpful when developing mobile apps that might be viewed on Android. It will also detect to see if you have canvas support before applying the replacement. Limited styles, only work in browser with Canvas Support

Sonic Looping Loader

Sonic is a small (~3k minified) JS "class" you can use to create custom loading animations. It works best with looping animations - i.e. a snake that's trying to eat its own tail. This is a really cool javascript preloader, but unfortunately your browser need to support canvas.

• Highly configurable, but only work with browsers with Canvas Support
• Small file size ~3k minified
• Customizable preloader style

HeartCode Canvas Loader

The Heartcode CanvasLoader is a lightweight JavaScript UI library, which uses the HTML5 Canvas element to draw and animate circular preloaders. The Heartcode CanvasLoader runs in every 'good' browser which supports the HTML5 Canvas element.

• Only work in browser with Canvas Support
• An UI to customize preloader

Spin.js

Spin.js can be easily be the best among the rest because of its support of old browsers. It also come with an UI to customize your own preloader.

• No dependencies (jQuery is supported, but not required)
• Highly configurable
• Resolution independent
• Uses VML as fallback in old IEs
• Uses @keyframe animations, falling back to setTimeout()
• Works in all major browsers, including IE6
• MIT License

Animated Gif Generators

Following by Animated Gif version. The difference between animated Gif version and JavaScript version is GIF usually come with a lot of different designs.

Preloaders.net

Chimply

AjaxLoad

LoadInfo

CSS3 Loading Animation

CSS3 Loading Animation Loop

Three CSS3 animation loop, can be used in many fields, such as preloader for images with jQuery.

CSS Loading Animation Circle Style

Loading CSS spinners and bars generator for AJAX & JQuery

CSS3 loading spinners without images

Bouncy Animated Loading Animation

Simple Loading Modal

PageLoading � jQuery plugin

Image Loader (jQuery Plugin)

Ajax Style Loading Animation in CSS3 (no Images)

As we all know loading images are very essential part of any website , but some time loading images takes time to load itself, but what if the images made up in CSS. So this time I used CSS3 to develop Ajax style loading animation.

Flickr Style Loading Animation using JQuery

The flickr loading animation is simpler than the facebook style, it consist of two circles with different color, when the animation start the circle on the left move to right with on top display and vice versa.

That's about it. When I was doing research about it, apparently it's still a new solutions, not many Javascript plugins out there doing it. Thanks for your support.

Tác giả

Thái Cao Phong theo chuyên ngành phát triển, lập trình web hơn 9 năm qua, đã & đang làm việc với PHP, JavaScript, CSS. Anh ấy là sáng lập viên của JavaScriptBank.com & 9BlogTips.com - cung cấp hàng nghìn mã nguồn JavaScript miễn phí, các thủ thuật lập trình web và các hướng dẫn blog hữu ích.

Hãy theo dõi anh ta tại twitter@js_bank hoặc kết nối qua facebook@jsbank nếu bạn muốn.

DanhNgon.info - Lời hay ý đẹp dành cho cuộc sống
ChonHostViet.com - Đánh giá hosting với gói ưu đãi miễn phí 1 năm đầu

• Mã nguồn
• In

• Lời bình (0)
• Viết

bởi Xem

Hủy phản hồi

Viết lời bình của bạn

Lời bình của khách sẽ được xem xét
Cung cấp email thật để nhận các trả lời, nếu không bình luận của bạn sẽ bị xóa

Tên bạn *
Email của bạn^g *
Website của bạn

Tiêu đề bình luận

Tôi khẳng định 100% là người thực
Tôi lặp lại tôi không phải là công cụ máy

• Lượt gửi (0)
• Mới