google+javascriptbanktwitter@js_bankfacebook@jsbankrss@jsbank






20 hiệu ứng Loading cực đẹp với JavaScript và ảnh GIF 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.


Nhãn: hiệu ứng Loading, thanh tiến trình tải trang

Miễn phí web hosting 1 năm đầu tại iPage



Nếu bạn vẫn còn đang tìm kiếm một nhà cung cấp hosting đáng tin cậy, tại sao không dành chút thời gian để thử với iPage, chỉ với không quá 40.000 VNĐ/tháng, nhưng bạn sẽ được khuyến mãi kèm với quà tặng trị giá trên 10.000.0000 VNĐ nếu thanh toán cho 24 tháng ~ 900.000 VNĐ?

Có trên 1 triệu khách hàng hiện tại của iPage đã & đang hài lòng với dịch vụ, tuyệt đối chắc chắn bạn cũng sẽ hài lòng giống họ! Quan trọng hơn, khi đăng ký sử dụng web hosting tại iPage thông qua sự giới thiệu của chúng tôi, bạn sẽ được hoàn trả lại toàn bộ số tiền bạn đã sử dụng để mua web hosting tại iPage. Wow, thật tuyệt vời! Bạn không phải tốn bất kì chi phí nào mà vẫn có thể sử dụng miễn phí web hosting chất lượng cao tại iPage trong 12 tháng đầu tiên. Chỉ cần nói chúng tôi biết tài khoản của bạn sau khi đăng ký.

Nếu muốn tìm hiểu thêm về ưu / nhược điểm của iPage, bạn hãy đọc đánh giá của ChọnHostViệt.com nhé!
Thử iPage miễn phí cho năm đầu tiên NGAY

---

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ả

Phong Thai 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

JavaScript theo ngày


Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web