Đối tác của ANewPlus ANewTips Xem Ngay!

Hiệu ứng loading cho blog/website

Xin chào mọi người hôm nay mình sẽ quay trở lại với chuyên mục share code

Share code hiệu ứng loading

Có rất nhiều cách trang trí để blog/website trở nên đẹp hơn. Hôm nay, Ngô Vi Minh Hiếu sẽ share cho các bạn một đoạn code với hiệu ứng loading chuyển động tuyệt đẹp.

Hiệu ứng loading cho blog/website
Hiệu ứng loading cho blog/website

Hướng dẫn chi tiết

  • Copy đoạn code phía dưới
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
 /*<![CDATA[*/
// Preloader
 
$(window).bind("load", function () {
    jQuery("#stringPreloader").fadeOut();
    jQuery("#loader").fadeOut();
});
  /*]]>*/
</script>

<style>
 #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)
}
}
</style>
<div id='loader'>
<img id='stringPreloader' src='https://i.imgur.com/vwD8FWx.png'/>
</div>
  
  • Dán toàn bộ code đã copy phía trên vào trước thẻ đóng </body>
  • Lưu lại là xong rồi !

Lời kết

Trên đây là toàn bộ code hiệu ứng loading cho blog/website. Nếu có bất cứ thắc mắc hay khiếu nại về bản quyền hãy comment ngay phía dưới cho mình biết nhé. Chúc các bạn thành công và có một ngày học tập, làm việc thật hiệu quả !!!

Post a Comment

Cookies Consent

This website uses cookies to ensure you get the best experience on our website.

Cookies Policy

We employ the use of cookies. By accessing Lantro UI, you agreed to use cookies in agreement with the Lantro UI's Privacy Policy.

Most interactive websites use cookies to let us retrieve the user’s details for each visit. Cookies are used by our website to enable the functionality of certain areas to make it easier for people visiting our website. Some of our affiliate/advertising partners may also use cookies.