How to create pre-loading animation for page loading

Để tạo hiệu ứng loading khi đang tải trang, giúp người xem đỡ nhàm chán, chúng ta có thể làm như sau:

Đầu tiên, thêm CSS cho pre-loading như sau:

<!-- Page loading styles-->
<style>
.page-loading{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;-webkit-transition:all .4s .2s ease-in-out;transition:all .4s .2s ease-in-out;background-color:#fff;opacity:0;visibility:hidden;z-index:9999}.page-loading.active{opacity:1;visibility:visible}.page-loading-inner{position:absolute;top:50%;left:0;width:100%;text-align:center;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out;opacity:0}.page-loading.active>.page-loading-inner{opacity:1}.page-loading-inner>span{display:block;font-family:Inter,sans-serif;font-size:1rem;font-weight:400;color:#737491}.page-spinner{display:inline-block;width:2.75rem;height:2.75rem;margin-bottom:.75rem;vertical-align:text-bottom;border:.15em solid #766df4;border-right-color:transparent;border-radius:50%;-webkit-animation:spinner .75s linear infinite;animation:spinner .75s linear infinite}@-webkit-keyframes spinner{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinner{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
</style>

Sau đó thêm script sau, tuy nhiên để đoạn script này có thể chạy, phải phải thêm jquery nhé, thường thì sẽ có sẵn jquery nếu sử dụng mã nguồn mở như wordpress

   <!-- Page loading scripts-->
    <script>
      (function () {
        window.onload = function () {
          var preloader = document.querySelector('.page-loading');
          preloader.classList.remove('active');
          setTimeout(function () {
            preloader.remove();
          }, 2000);
        };
      })();
      
    </script>

Hai đoạn CSS và script trên chèn vào trước khi đóng thẻ </head> nhé

Và cuối cùng, chèn đoạn HTML này ngay sau thẻ <body> là xong.

    <!-- Page loading spinner-->
    <div class="page-loading active">
      <div class="page-loading-inner">
        <div class="page-spinner"></div><span>Loading...</span>
      </div>
    </div>
Cùng chuyên mục