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 #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 <div id='loader'>
<img id='stringPreloader' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi-cab1mcZHR0-FVpaluxxQDWlkVDG_jw6r2BnuVWJeFY6YmDhGfNs1kd3M3WbGaTggs0ILdL65E_kB4L8yVkzDMBPF88Dh1WDUmItIzIoz7xNGKu_Zjq87PoU_iYRtEtTzg0z1pIQI3aS/'/>
</div>
