Cách tạo loading icon đẹp mắt cho web

Thủ thuật dưới đây sẽ giúp bạn tạo một loading icon đẹp mắt cho web, giúp khách hàng đỡ nhàm chán hơn khi chờ web bạn load xong.

Bạn chỉ cầ dùng jQuery và CSS là có thể tạo được hiệu ứng này. Dưới đây là một số loading icon mà bạn có thể dùng:

Còn đây là icon preloader:

Tải trọn bộ những icon này theo link cuối bài viết.

Cách tạo loading icon cho web

Bước 1: Thêm code sau vào sau thẻ body:

Bước 2: Thêm CSS:

/* Paste this css to your style sheet file or under head tag */
/* This only works with JavaScript, 
if it's not present, don't show loader */
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(images/loader-64x/Preloader_2.gif) center no-repeat #fff;
}

Bước 3: Thêm đoạn code bên dưới vào header:

//paste this code under head tag or in a seperate js file.
	// Wait for window load
	$(window).load(function() {
		// Animate loader off screen
		$(".se-pre-con").fadeOut("slow");;
	});