Tạo và sử dụng hiệu ứng Ripple Loading trong thiết kế web

Thời gian chờ tải xong một trang web, một tiện ích, một ứng dụng... thật là vô bổ, và để giảm thiểu sự nhàm chán đó người ta thường thêm vào các hiệu ứng loading. Điều đó vừa tăng tính thẩm mỹ cho trang web, đồng thời cũng thể hiện sự chăm chút từ phía webmaster tới trải nghiệm người dùng.

Trong bài này tôi sẽ cùng các bạn tìm hiểu cách Tạo và sử dụng hiệu ứng Ripple Loading từ mã HTML và CSS

Cụ thể tôi sẽ áp dụng hiệu ứng này tính từ lúc người dùng truy cập vào trang cho đến khi mọi thứ đã tải xong xuôi.

Mã HTML

<div class="loading">
    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>

Code CSS

<style type="text/css">
.loading{position:fixed;background:#fff;z-index:1000;top:0;left:0;width:100%;height:100%}
.loading>div{position:fixed;top:50%;left:45%}
.loading span{display:inline-block;width:20px;height:20px;background:#000;border-radius:100%;animation:loading .8s linear infinite alternate}
.loading span:nth-of-type(1){animation-delay:-.8s}
.loading span:nth-of-type(2){animation-delay:-.5s}
.loading span:nth-of-type(3){animation-delay:-.2s}
@keyframes loading{from{transform:scale(0)}to{transform:scale(1)}}
</style>

Theo mã trên hiệu ứng loading sẽ luôn nằm ở chính giữa màn hình, bây giờ ta sẽ dùng vài dòng js để xử lý.

Sự kiện khi tải xong trang (html,css,js,...) trong jQuery - $(window).on("load",function(){}) sẽ giúp ta làm điều đó

Code js

<script>//<![CDATA[
$(window).on('load', function(){
  $('.loading').fadeOut(1000);
})
//]]></script>

Bạn đặt tất cả 3 đoạn code trên càng gần thẻ <body...> càng tốt vì nó sẽ được tải trước. Code hoạt động trên mọi nền tảng nói chung và blogspot nói riêng

Ok, không có gì quá phức tạp, hi vọng với thủ thuật này bạn sẽ học thêm được một mẹo nữa trong quá trình thiết kế web để cải thiện trải nghiệm người dùng trên website của mình

Good Luck !