Ads Menu

» » TỔNG HỢP TOP 8 HIỆU ỨNG LOADING ĐẸP VÀ HOT NHẤT 2016

TỔNG HỢP TOP 8 HIỆU ỨNG LOADING ĐẸP VÀ HOT NHẤT 2016

Writer:
TỔNG HỢP TOP 8 HIỆU ỨNG LOADING ĐẸP VÀ HOT NHẤT 2016

Dưới đây là top 8 code gif loading mà mình đã sưu tập được . Và nếu blog  hay web của bạn có một trong 8 gif dưới đây , quả là một điều thú vị phải không ? . Nào hãy chọn một gif loading mà bạn cảm thấy ưng ý nhất nào ! :) 

CSS : 
- Để hiển thị hình ảnh khi load qua một trang mới hay bấm vào 1 topic nào như hình ở trên bạn cầm thêm đoạn code dưới trước thẻ ]]></b:skin> trong Mẫu ~> Chỉnh Sửa HTML
123456789101112131415161712345678910111213141516#abt-page-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#0C0C0C
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8zd_hqxVgXYiUJPUZHXfpCn_BzdsyxFlagi4n78rqObB3Ji63iupGk0L7MnwFEALaQzLJZFHBF_DLrt67m4yQoyn79C6c6rt7P5cy2s6Z6ZNbfqpRXULLeGYgfeREXd2pCXxEXwCZFMw/s1600/loading.gif')
no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}

Javascript :

Thêm đoạn javascript sau vào trước thẻ đóng </body>
123456789123456789<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="abt-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
  // ... Show the Animation `.fadeIn()`
 $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
DEMO 2 : 


CSS : 
- Để hiển thị hình ảnh khi load qua một trang mới hay bấm vào 1 topic nào như hình ở trên bạn cầm thêm đoạn code dưới trước thẻ ]]></b:skin> trong Mẫu ~> Chỉnh Sửa HTML
1234567891011121314151612345678910111213141516#abt-page-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#0C0C0C
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiELwHv2wdPSkS7T7lFhMNecsbU0HFazLpRiunC4YpfdOTdjZdr9PXaiy3ifHyY-vlNQT8R8WzQx9Qj8w3eCTZs7mds6kM8NmxWfTQciPSPO60IbRqjttj0j0m689r9FT88wkrde5dxb1pp/s320/tumblr_nln3scL0XO1sjb4o2o1_400.gif')
no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
Javascript :
Thêm đoạn javascript sau vào trước thẻ đóng </body>
123456789123456789<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="abt-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
  // ... Show the Animation `.fadeIn()`
 $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
DEMO 3 : 

CSS :
- Để hiển thị hình ảnh khi load qua một trang mới hay bấm vào 1 topic nào như hình ở trên bạn cầm thêm đoạn code dưới trước thẻ ]]></b:skin> trong Mẫu ~> Chỉnh Sửa HTML
1234567891011121314151612345678910111213141516#abt-page-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#0C0C0C
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU-IGV7xtS7na55aeFgVt2heImS8n-uFPNPeJZrHdRD3DADsE_fFygv_ehfMQKB5kBrg0SONGkGOHyRnpMee3nZn0xPABl62ilmOwFCe0B89GGomwObowtf43RFOvwwfnAzkCi5XecHNfK/s1600/loading.gif')
no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
Javascript :
Thêm đoạn javascript sau vào trước thẻ đóng </body>
123456789123456789<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="abt-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
  // ... Show the Animation `.fadeIn()`
 $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
DEMO 4 : 
                        Kết quả hình ảnh cho gif loading
         

CSS : 

- Để hiển thị hình ảnh khi load qua một trang mới hay bấm vào 1 topic nào như hình ở trên bạn cầm thêm đoạn code dưới trước thẻ ]]></b:skin> trong Mẫu ~> Chỉnh Sửa HTML
1234567891011121314151612345678910111213141516#abt-page-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#0C0C0C
url('http://i.imgur.com/eMNHN3y.gif')
no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
Javascript :
Thêm đoạn javascript sau vào trước thẻ đóng </body>
123456789123456789<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="abt-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
  // ... Show the Animation `.fadeIn()`
 $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
DEMO 5 : 



CSS : 
- Để hiển thị hình ảnh khi load qua một trang mới hay bấm vào 1 topic nào như hình ở trên bạn cầm thêm đoạn code dưới trước thẻ ]]></b:skin> trong Mẫu ~> Chỉnh Sửa HTML
1234567891011121314151612345678910111213141516#abt-page-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#0C0C0C
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxp-CZjf1KM3NB1XG6bYekmjGUDF66uYzTWvbGohkXUB7kSXeOz7noVHkKdOv3kv6YagHmShzuJ_Y4eOS_xOqXKbcfZncEN05UE79qKpUsEidRCqeth2Ket2h-N6t9fnEoVS7IU0IiX9I/s1600/39.gif')
no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
Javascript :
Thêm đoạn javascript sau vào trước thẻ đóng </body>
123456789123456789<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="abt-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
  // ... Show the Animation `.fadeIn()`
 $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
DEMO 6 : 

CSS : 
- Để hiển thị hình ảnh khi load qua một trang mới hay bấm vào 1 topic nào như hình ở trên bạn cầm thêm đoạn code dưới trước thẻ ]]></b:skin> trong Mẫu ~> Chỉnh Sửa HTML
1234567891011121314151612345678910111213141516#abt-page-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#0C0C0C
url('http://1obpen1mqf5n1nhx8m3r9r40.wpengine.netdna-cdn.com/wp-content/plugins/flickr-album-gallery/img/loading.gif')
no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
Javascript :
Thêm đoạn javascript sau vào trước thẻ đóng </body>
123456789123456789<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="abt-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
  // ... Show the Animation `.fadeIn()`
 $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
DEMO 7 : 

CSS : 
- Để hiển thị hình ảnh khi load qua một trang mới hay bấm vào 1 topic nào như hình ở trên bạn cầm thêm đoạn code dưới trước thẻ ]]></b:skin> trong Mẫu ~> Chỉnh Sửa HTML
1234567891011121314151617
1234567891011121314151612345678910111213141516#abt-page-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#0C0C0C
url('http://suafoto.cassiaelleromusical.com.br/public/system/imagens/loading.gif')
no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
Javascript :
Thêm đoạn javascript sau vào trước thẻ đóng </body>9
123456789123456789<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="abt-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
  // ... Show the Animation `.fadeIn()`
 $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
DEMO 8 : 

CSS : 

- Để hiển thị hình ảnh khi load qua một trang mới hay bấm vào 1 topic nào như hình ở trên bạn cầm thêm đoạn code dưới trước thẻ ]]></b:skin> trong Mẫu ~> Chỉnh Sửa HTML
123456789101112131415161718

12345678910111213141516#abt-page-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#0C0C0C
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidxZZlznWzJONmLBn0sYogPKr5KUlZWifAFGJgM13TpE495c6Du673hLYhE5jxwG37t5asSW0HsQFb9c_md7XA4CybxpGtYRoQCB_-rqFOhUOIAFRrpVwn28WKFe0v4Kew30rqYW2Kyg/s1600/loading.gif')
no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
Javascript :
Thêm đoạn javascript sau vào trước thẻ đóng </body>
123456789123456789<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="abt-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
  // ... Show the Animation `.fadeIn()`
 $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

Danh mục : Blogger
0 Comment "TỔNG HỢP TOP 8 HIỆU ỨNG LOADING ĐẸP VÀ HOT NHẤT 2016"

Back To Top