Giới Thiệu

Bài viết này mình sẽ chia sẻ cho những bạn chưa biết, muốn sử dụng hiểu ứng loading này cho blogspot của mình, làm blog, website của bản thân chuyên nghiệp hơn. Như các blog, website khác đã chia sẻ, nên hôm nay mình cũng viết bài viết này để chia sẻ cho các bạn sử dụng Hiệu Ứng Loading Chuyên Nghiệp như này nhé.

Tao Hieu Ung Loading Dep Chuyen Nghiep Cho Blogspot

Các Bước Thực Hiện

Bước 1: Vào chỉnh sửa HTML
Bước 2: Chèn đoạn code bên dưới vào dưới thẻ <body> ( nếu không tìm ra thì thẻ body của bạn đã bị mã hóa " < > " bạn có thể search <body> nhé.

<style>

#loadhalaman{position:absolute;top:62%;left:50%;transform:translate(-50%,-50%)}

.loadball{border:1px solid rgb(240,0,0);background-color:transparent;border-right:1px solid #aaa;border-radius:50px;box-shadow:0 0 50px rgb(255,0,0,.1);border-left:1px solid #aaa;width:50px;margin:0 auto;-moz-animation:spinoffPulse 1s infinite linear;height:50px;-webkit-animation:spinoffPulse 1s infinite linear}

.loadball-2{background-color:transparent;border:1px solid rgb(240,0,0);border-left:1px solid #ddd;border-right:1px solid #ddd;border-radius:50px;width:20px;height:20px;margin:0 auto;position:relative;top:-35px;-moz-animation:spinoffPulse2 1s infinite linear;-webkit-animation:spinoffPulse2 1s infinite linear}

@-webkit-keyframes spinoffPulse{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}

@-webkit-keyframes spinoffPulse2{0%{-webkit-transform:rotate(360deg)}100%{-webkit-transform:rotate(0deg)}}

#abc-abc2{position:fixed;top:50%;left:50%;z-index:99999;transform:translate(-50%,-50%);background:white;width:80px;height:80px;text-align:center;border-radius:50%;box-shadow:0 0 100px rgba(0,0,0,.3)}

</style>

<div id='abc-abc2'>

<div id='loadhalaman'>

<div class='loadball'/>

<div class='loadball-2'/>

</div>

</div>

<script type='text/javascript'>$(window).bind("load",function(){$("#abc-abc2").fadeOut(2000)});</script>