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

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/AVvXsEjQGwwxiyRMobviS8DvHrEV_1ly-ySITWhfjvCjdHeAs2jhVekfq97_JPr9pmxEgTaxmxh_a7HxcVLqJd-oWJAe_NtKhhTVj8mufBWCSzgPgK0xG5cnravrrezsmKDLmGN4OIe-kHjXIjs/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/AVvXsEikbBDXZ7nMIF0LWQRGXlLNlLcfW3RbW5six8ekmAvjM07C9D757PBxeKJsQyTbR-FNsnAqRmda81R_hbWshOv7fe-vuf8Y73geSf_AJbt2hFl3r4TZo7i1J5n-LhkNC-b4TMvAHTK54BBf/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/AVvXsEglLfZ4pkyQPZbFtxqJAaaP0gICdG9KYIZ9g_bL9DGjlB7EKHaIBx4tsCMjyEMToKt5uu5XStc9vrV_Kfj4ZGDDVqja9sBfbooGF2yuPhj7Huf7NNpe0onsJgLYHLkI1DihIAgzBYR-4ArV/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 : 
                       
         

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/AVvXsEhPdAwmGe59wlZCaOrpbjO9SO6juuOAEj4_GS4FgEP7Pid3XX1yo9KUXM2lG42OuvDp5hSnQJhuXgGbU0ELfro2yhyO99e50UdeF5YmcKNEn7jllcjYhkXqd1zSLWpFfW7gjk5lj2TsPjA/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/AVvXsEiPlIvjxT3lhbj3tgNMLhqZr-eUwolK-bfDmKGr7gBbA4gHlEAgvGvNuTuKb8USP58HPysWBEJgvD-H5EvvDyJauMclGBesWAm38Rm5af3eRds081rivERMWKS8N4CWJ822Vh4NIUreQw/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>

TỔNG HỢP TOP 8 HIỆU ỨNG LOADING ĐẸP VÀ HOT NHẤT 2016 2016-11-12T06:04:00-08:00 Rating: 4.5 Diposkan Oleh: Admin