Tạo hiệu ứng loading chuyên nghiệp khi tải trang đơn giản

Tạo hiệu ứng loading chuyên nghiệp khi tải trang đơn giản

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.

tao hieu ung loading chuyen nghiep khi tai trang don gian
Hình Minh Họa

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(&quot;load&quot;,function(){$(&quot;#abc-abc2&quot;).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!

Star Cường IT ­

Cập nhật mới nhất các bài viết chia sẻ thủ thuật facebook, thủ thuật blogger, thủ thuật windows, template blogspot, seo blog.

32 Nhận xét

  1. Nặc danh05 tháng 5

    sao k có link deme gì hết vậy cường

    Trả lờiXóa
  2. Em nghĩ anh để Theme cũ mơi đẹp. Đúng phong cách Sờ Ta Cường chứ :))

    Trả lờiXóa
    Trả lời
    1. Cũng nghĩ thế mà để đổi gió tý đi e, có gì vài bữa hè tính tiếp ^^

      Xóa
  3. quá đỉnh đẹp nữa chứ <3

    Trả lờiXóa
  4. không có url để đổi gif hã anh cường

    Trả lờiXóa
  5. Cái này ngon nà :))

    Trả lờiXóa
    Trả lời
    1. Ngon thì lấy về mà xài ^^

      Xóa
    2. Tất nhiên dồi! Ngon là phải chôm ngay :))

      Xóa
    3. 'Chôm' về dùng nha, đừng chôm kiểu khác :v

      Xóa
Mới hơn Cũ hơn