Chào các bạn, để tạo thêm phần sống động cũng như chuyên nghiệp cho website/blog của mình thì trong hôm nay mình sẽ giới thiệu đến các bạn cách tạo hiệu ứng loading chuyên nghiệp khi tải trang đơn giản, ai cũng làm được.
CÁC BƯỚC THỰC HIỆN
Bước 1: Vào quản lý blogspot, Chủ Đề, Chỉnh Sửa HTML
Bước 2: Chèn đoạn code sau vào bên dưới thẻ <body> (nếu các bạn không tìm ra <body> thì hãy tìm <body nhé)
Bước 3: Lưu template.
CÁC BƯỚC THỰC HIỆN
Bước 1: Vào quản lý blogspot, Chủ Đề, Chỉnh Sửa HTML
Bước 2: Chèn đoạn code sau vào bên dưới thẻ <body> (nếu các bạn không tìm ra <body> thì hãy tìm <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>
Bước 3: Lưu template.
Lời kết
Bên trên là cách tạo hiệu ứng loading chuyên nghiệp khi tải trang đơn giản. Nếu có gì thắc mắc hay không hiểu bạn có thể để lại comment bên dưới, mình sẽ giải đáp sớm nhất có thể.
Chúc các bạn thành công!
Bên trên là cách tạo hiệu ứng loading chuyên nghiệp khi tải trang đơn giản. Nếu có gì thắc mắc hay không hiểu bạn có thể để lại comment bên dưới, mình sẽ giải đáp sớm nhất có thể.
Chúc các bạn thành công!
HIỆN TẠI CÓ 0 BÌNH LUẬN
Một số lưu ý khi bình luận
Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)
Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời
Để bình luận một đoạn code, hãy mã hóa code trước nhé