Hiệu ứng loading đẹp cho website

Để thêm sự thú vị và cuốn hút cho website của bạn thì việc thêm, hiệu ứng là rất cần thiết. Dưới đây là những hiệu ứng loading đẹp mà mình sưu tầm và share cho các bạn dùng.
Mẫu 1:

Chèn 2 đoạn code này vào sau thẻ <head> hoặc trước thẻ </head> để áp dụng:
Code Css:


#hackergrousrlpprsc-loader { position: fixed!important; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; background:#0C0C0C url('https://1.bp.blogspot.com/-7ROpg5htrcY/WC1InOVcKsI/AAAAAAAAAMk/HHd_Oavc6DUq63XUVCpX_PBLmvAy9zDtgCLcB/s320/final.gif') no-repeat 50% 30%; color: #FFF; display: none; font: 0/0 a; text-shadow: none; padding: 1em 1.2em; }
Code javascript:
<script type='text/javascript'> //<![CDATA[ $(document.body).append('<div id="hackergrousrlpprsc-loader">Đang tải</div>'); $(window).on("beforeunload", function() { // ... Show the Animation `.fadeIn()` $('#hackergrousrlpprsc-loader').fadeIn(1000).delay(6000).fadeOut(1000); }); //]]> </script>

Mẫu 2:

Code Css:


#hackergrousrlpprsc-loader { position: fixed!important; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; background:#0C0C0C url('https://3.bp.blogspot.com/-6O4WFc5Q8Lc/WC1H-TyhekI/AAAAAAAAAMc/5AoD95lM8PMruGnIuqZ2er1D1NLQqwNHQCLcB/s1600/tumblr_nln3scL0XO1sjb4o2o1_400.gif') no-repeat 50% 30%; color: #FFF; display: none; font: 0/0 a; text-shadow: none; padding: 1em 1.2em; }
Code javascript:
<script type='text/javascript'> //<![CDATA[ $(document.body).append('<div id="hackergrousrlpprsc-loader">Đang tải</div>'); $(window).on("beforeunload", function() { // ... Show the Animation `.fadeIn()` $('#hackergrousrlpprsc-loader').fadeIn(1000).delay(6000).fadeOut(1000); }); //]]> </script>

Mẫu 3:

Code Css:


#hackergrousrlpprsc-loader { position: fixed!important; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; background:#0C0C0C url('https://4.bp.blogspot.com/-nvFJwqM621c/WC1H-CO16KI/AAAAAAAAAMY/49kf7V0ex_k82PU_SaG2sGk6hw-Cfp6ewCLcB/s1600/loading.gif') no-repeat 50% 30%; color: #FFF; display: none; font: 0/0 a; text-shadow: none; padding: 1em 1.2em; }
Code javascript:
<script type='text/javascript'> //<![CDATA[ $(document.body).append('<div id="hackergrousrlpprsc-loader">Đang tải</div>'); $(window).on("beforeunload", function() { // ... Show the Animation `.fadeIn()` $('#hackergrousrlpprsc-loader').fadeIn(1000).delay(6000).fadeOut(1000); }); //]]> </script>

Mẫu 4:

Code Css:


#hackergrousrlpprsc-loader { position: fixed!important; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; background:#0C0C0C url('https://3.bp.blogspot.com/-6SYBDOe30C0/WC1H_BfAc0I/AAAAAAAAAMg/JveTNKZoQ7gMloT-mirROHbuP674nsO6gCLcB/s1600/loading%2B%25284%2529.gif') no-repeat 50% 30%; color: #FFF; display: none; font: 0/0 a; text-shadow: none; padding: 1em 1.2em; }
Code javascript:
<script type='text/javascript'> //<![CDATA[ $(document.body).append('<div id="hackergrousrlpprsc-loader">Đang tải</div>'); $(window).on("beforeunload", function() { // ... Show the Animation `.fadeIn()` $('#hackergrousrlpprsc-loader').fadeIn(1000).delay(6000).fadeOut(1000); }); //]]> </script>

Mẫu 5:

Code Css:


#hackergrousrlpprsc-loader { position: fixed!important; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; background:#0C0C0C url('https://2.bp.blogspot.com/-K6t6oBc4jd0/WC1H9h6QBWI/AAAAAAAAAMU/A0C5q9w-mwkVQf_HlezvaJ0lftPP1u9jwCLcB/s1600/loading%2B%25283%2529.gif') no-repeat 50% 30%; color: #FFF; display: none; font: 0/0 a; text-shadow: none; padding: 1em 1.2em; }
Code javascript:
<script type='text/javascript'> //<![CDATA[ $(document.body).append('<div id="hackergrousrlpprsc-loader">Đang tải</div>'); $(window).on("beforeunload", function() { // ... Show the Animation `.fadeIn()` $('#hackergrousrlpprsc-loader').fadeIn(1000).delay(6000).fadeOut(1000); }); //]]> </script>

Mẫu 6:

Code Css:


#hackergrousrlpprsc-loader { position: fixed!important; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; background:#0C0C0C url('https://2.bp.blogspot.com/-q_YH7ZTRXQk/WC1H9jcbWCI/AAAAAAAAAMQ/BMLWcMlTz6YJW1gBzLe9Fv95zO6bxZNIwCLcB/s1600/loading%2B%25282%2529.gif) no-repeat 50% 30%; color: #FFF; display: none; font: 0/0 a; text-shadow: none; padding: 1em 1.2em; }
Code javascript:
<script type='text/javascript'> //<![CDATA[ $(document.body).append('<div id="hackergrousrlpprsc-loader">Đang tải</div>'); $(window).on("beforeunload", function() { // ... Show the Animation `.fadeIn()` $('#hackergrousrlpprsc-loader').fadeIn(1000).delay(6000).fadeOut(1000); }); //]]> </script>

Mẫu 7:

Code Css:


#hackergrousrlpprsc-loader { position: fixed!important; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; background:#0C0C0C url('https://4.bp.blogspot.com/-RBs0FXuhOI0/WC1H9ITDexI/AAAAAAAAAMM/NCTe3mBg2vc5KWcGmDdT2eQjZfRWzj6cACLcB/s1600/loading%2B%25281%2529.gif') no-repeat 50% 30%; color: #FFF; display: none; font: 0/0 a; text-shadow: none; padding: 1em 1.2em; }
Code javascript:
<script type='text/javascript'> //<![CDATA[ $(document.body).append('<div id="hackergrousrlpprsc-loader">Đang tải</div>'); $(window).on("beforeunload", function() { // ... Show the Animation `.fadeIn()` $('#hackergrousrlpprsc-loader').fadeIn(1000).delay(6000).fadeOut(1000); }); //]]> </script>

Mẫu 8:

Code Css:


#hackergrousrlpprsc-loader { position: fixed!important; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; background:#0C0C0C url('https://3.bp.blogspot.com/-UJ6K3OwLA8Q/WC1H9OkS6uI/AAAAAAAAAMI/cD1TgSbWlUYBhLcCAl-x7JP2RG0fQjCRACLcB/s1600/39.gif') no-repeat 50% 30%; color: #FFF; display: none; font: 0/0 a; text-shadow: none; padding: 1em 1.2em; }
Code javascript:
<script type='text/javascript'> //<![CDATA[ $(document.body).append('<div id="hackergrousrlpprsc-loader">Đang tải</div>'); $(window).on("beforeunload", function() { // ... Show the Animation `.fadeIn()` $('#hackergrousrlpprsc-loader').fadeIn(1000).delay(6000).fadeOut(1000); }); //]]> </script>

Mẫu 9:

Code Css:


#hackergrousrlpprsc-loader { position: fixed!important; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; background:#0C0C0C url('https://4.bp.blogspot.com/-Mevm2oYeU1g/WC1H9NqA1bI/AAAAAAAAAME/0YH5iS0axGch_JOdfxo474-y0j8PZtX2ACLcB/s320/4e4a7660_20f73e52_loading98.gif') no-repeat 50% 30%; color: #FFF; display: none; font: 0/0 a; text-shadow: none; padding: 1em 1.2em; }
Code javascript:
<script type='text/javascript'> //<![CDATA[ $(document.body).append('<div id="hackergrousrlpprsc-loader">Đang tải</div>'); $(window).on("beforeunload", function() { // ... Show the Animation `.fadeIn()` $('#hackergrousrlpprsc-loader').fadeIn(1000).delay(6000).fadeOut(1000); }); //]]> </script>
Chúc các bạn thành công!

Mã bài viết: 654rtu4rtu
Người viết: Hacker GSP
Powered by Blogger.