Mình sử dụng Glyphicon của Bootstrap và CSS3 để tạo biểu tượng tải trang. Bạn có thể dùng ảnh GIF, SVG hay bất kì thứ gì khác tùy ý.
HTML
Bạn cần thêm overflow: hidden;
vào body
để mất đi thanh cuộn trong trường hợp trang quá dài. Mình sử dụng class preloading
.
<body class="preloading"> <div id="preload" class="preload-container text-center"> <span class="glyphicon glyphicon-repeat preload-icon rotating"></span> </div> </body>
CSS
.preloading { overflow: hidden; } .preload-container { width: 100%; height: 100%; background: #ef6e7e; position: fixed; top: 0; bottom: 0; right: 0; left: 0; z-index: 99999999999; display: block; padding-right: 17px; overflow-x: hidden; overflow-y: auto; } .preload-icon { font-size: 66px; color: #fff; margin-top: 20%; } @-webkit-keyframes { from { -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotating { from { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } .rotating { -webkit-animation: rotating 1.5s linear infinite; -moz-animation: rotating 1.5s linear infinite; -ms-animation: rotating 1.5s linear infinite; -o-animation: rotating 1.5s linear infinite; animation: rotating 1.5s linear infinite; }
jQuery
Đây là phần quan trọng nhất, nhưng cũng dễ nhất, chúng ta dùng sự kiện $(window).load();
để nhận biết khi nào trang tải xong. Sau đó bỏ class preloading
khỏi body
và ẩn trang chờ đi.
$(window).load(function() { $('#preload').delay(1000).fadeOut('fast', function() { $('body').removeClass('preloading'); }); });
Chúc các bạn thành công!