Tạo hiệu ứng loading Corona cho website

 hello xin chào toàn thể anh em đang theo dõi cộng đồng kimidev nhé. Và hôm nay thì minh xin chia sẽ cho anh em chúng ta một cái code giúp Loading Corona thú vị nha. oki bây giờ chúng ta cùng đi làm thôi nha. 

Các bạn có thể xem Demo ngay tại trang này lun nhá. 

Tạo hiệu ứng loading Corona cho website

Tuyên truyền

như các bạn đã thấy là tình dịch bệnh ngày càng phức tạp, nên hôm nay mình làm cái hiệu ứng này là muốn tuyên truyền mọi người là hãy tuân thủ 5K, phòng chống dịch bệnh, mau qua đi, và người dân sớm trở lại với cuộc sống ổn định của mình. 

Cách Hoạt động

và dĩ nhiên thì có một điều đặc việt đối với code này là nó sẽ hiển thị theo từng thành phần nhé các bạn. ví dụ như các blogger sẽ load dao diện trước rùi sau đó mới loading tới tội dung, và code này cũng như thế. nó sẽ hiển thị loading toàn blogger, sau đó nó sẽ chuyển sang loading nội dung luôn. khá là thú vị đúng không anh em. 

Cách thực hiện. 

Bước 1: Thêm JQuery

đầu tiên thì mọi người kiểm tra cho mình coi source code của mọi người đã có JQuery hay chưa, nếu chưa thì mọi người thêm Link này vào phía trên </head> hoặc trên </body> đều được nhé. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>

Bước 2: Thêm JS

các bạn thêm  đoạn code Js bên dưới vào phía trên của thẻ </body> cho mình nha. 

<script type="text/javascript">
 /*<![CDATA[*/
// Preloader
 
$(window).bind("load", function () {
    jQuery("#stringPreloader").fadeOut();
    jQuery("#loader").fadeOut();
});
  /*]]>*/
</script>

Bước 3: Thêm css 

các bạn tìm cho mình thẻ </style> và thêm đoạn code bên dưới vào phía trên của thẻ </style>, hoặc thêm vào phía trên của thẻ ]]></b:skin>

 #loader {
position: fixed;
inset: 0;
margin: auto;
background: #fff;
height: 100%;
width: 100%;
z-index: 99999;
}
#stringPreloader {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#stringPreloader {
-webkit-animation: spinner 2.5s infinite linear;
animation: spinner 2.5s infinite linear
}
@-webkit-keyframes spinner {
0% {
-webkit-transform: rotate(0);
transform: rotate(0)
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@keyframes spinner {
0% {
-webkit-transform: rotate(0);
transform: rotate(0)
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}

Bước 4; thêm đoạn HTML 

các bạn thêm đoạn HTML bên dưới vào phía trên của thẻ </body> nhé. 

<div id='loader'>
<img id='stringPreloader' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXWs8TvGndhj1GiyAvmUKWxxwFalDT3tI4gTZ9x-ZGGEmQ4NJqFNfAxBBNyEoCQtZw1A-V-omt6VtD4EGwClWrQX5qo86KmsHce44K3h1epoWsyophVywt1x9ZoY1Yuv2iTIOjM9EmLhH9/'/>
</div>

okiii và đó là toàn bộ code mà mình muốn share cho anh em, chúc anh em thành công nhe. nếu như có thắc mắc thì thì anh em có thể comment bên dưới mình sẽ giải đáp cho anh em nha.