SHARE HIỆU ỨNG LOADING TUYỆT ĐẸP CHO BLOG

Đã Xuất Bản

TẢN MẠN

Hello, xin chào tất cả các bạn đã quay trở lại với blog của mình !!! Nhân ngày lễ Quốc Khánh (02-09) được nghỉ ở nhà, không đi chơi đâu nên ngồi viết bài - gọi là có tý quà hihi. Không liên thiên nữa thì hôm nay mình xin phép chia sẻ hiệu ứng load trang cực kì cute :)

THÔNG TIN CODE

THỰC HÀNH

Rất là đơn giản, đơn giản vô cùng luôn !!! Các bạn chỉ cần chèn code bên đoạn code bên dưới vào ngay sau thẻ <body> hoặc <body 
<!-- Bắt đầu loading -->
<style>
.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
@-webkit-keyframes pulse{from{-webkit-transform:scale3d(0.068,0.068,0.068);transform:scale3d(0.068,0.068,0.068)}500%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
to{-webkit-transform:scale3d(0.068,0.068,0.068);transform:scale3d(0.068,0.068,0.068)}}
@keyframes pulse{from{-webkit-transform:scale3d(0.068,0.068,0.068);transform:scale3d(0.068,0.068,0.068)}50%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
to{-webkit-transform:scale3d(0.068,0.068,0.068);transform:scale3d(0.068,0.068,0.068)}}
.pulse{-webkit-animation-name:pulse;animation-name:pulse}
#preloader{position:fixed;top:0;left:0;height:100%;width:100%;background-color:#fff;z-index:9999999999;background-repeat:no-repeat;background-position:center center;font-family:Open Sans,sans-serif}
blockquote{font-size:inherit}
.loading-page{background:#000000;width:100vw;height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.loading-page .counter{text-align:center}
.loading-page .counter p{font-size:40px;font-weight:100;color:#ff0050}
.loading-page .counter h1{color:#fff;font-size:60px;margin-top:-10px}
.loading-page .counter hr{background:#ff0000;border:none;height:2px;float:left}
.loading-page .counter{position:relative;width:200px}
.loading-page .counter h1.abs{position:absolute;top:0;width:100%}
.loading-page .counter .color{width:0;overflow:hidden;color:#ff0050}
</style>
<!-- Preloader -->
<div id='preloader'>
<div class='loading-page'>
<div class='counter'>
<p><a href='//fb.com/www.leanhduc.xyz' style='color:#fff'><b target='blank' title='Click Now'><span style='background: url(&quot;https://lh5.googleusercontent.com/proxy/8pFzttS9q8jwN_vA-_u7dSEDH2WlAZ4SA2YSEgzGWiqmdYhUejwgcv-nKmpx1hlwrL8oTVz1DfK_daTeAt_it_MHRA42jmPHFk-6smvJ5LocCs-5Pw=s0-d&quot;) repeat scroll 0% 0% transparent; color:#ff0000; text-shadow: 0pt 0pt #ff0000, 0pt 1pt 0.3em #ff0000;'><i class='fa fa-heart animated infinite pulse'/></span></b></a></p>
<h1>0%
<!-- h1.abs loading h1.abs.color loading -->
</h1>
<hr/>
</div>
</div>
</div>
<script type='text/javascript'>//<![CDATA[
// Loader
  var counter = 0;
  var c = 0;
  var i = setInterval(function(){
      $(".loading-page .counter h1").html(c + "%");
      $(".loading-page .counter hr").css("width", c + "%");
    counter++;
    c++;
      
    if(counter == 101) {
        clearInterval(i);
        $("#preloader").delay(100).fadeOut(500);
    }
  }, 50);
//]]></script>
<!-- kết thúc Loading -->

LỜI KẾT

Nếu thầy bài viết hay và hữu ích thì tiếc gì một click quảng cáo nhỉ :v Click để mình có động lực viết bài tiếp nha <3
Chúc các bạn một ngày học tập và làm việc thật hiệu quả !!! Xin chào và hẹn gặp lại trong bài viết lần sau hihi :)
Mọi hình ảnh/bài viết trên trang web này điều được tự mình design hoặc sưu tầm từ các trang khác ! Mọi hành động Copy & Reup vui lòng ghi rõ nguồn Lê Anh Đức

Bài Viết Bạn Nên Xem


50 bình luận

Hãy cùng tham gia bình luận về bài viết này nhé!

  1. Để anh kể cho chú nghe về một huyền thoại top 1 comment ahaha =))

    Trả lờiXóa
    Trả lời
    1. khá vl... nhanh đến kinh dị...tui vừa mới xuất bản mà =ask

      Xóa
    2. Hồi trước có duyên với Đức lắm...h lại có duyên với bác rồi hahah...chắc phải offine buổi :D đều ở Hà Nội mà nhỉ

      Xóa
    3. haha vậy chế có duyên với blog này rồi chứ chẳng phải riêng ai...không làm blogger mà chăm comment quá haha...có duyên sẽ offline với chế buổi <3 Nhất định là vậy kakak (y)

      Xóa
  2. Cái này rất khó chiệu đối với người dungg

    Trả lờiXóa
    Trả lời
    1. Dạ nhìn nó đẹp hahha. Ai thích thì dùng

      Xóa
    2. Hổng có saooo....ai thích thì sài thôi em ơi =))

      Xóa
  3. Trả lời
    1. bài này vừa mới ra hôm qua mà bác @@

      Xóa
  4. https://www.toishare.net/2018/08/tao-hieu-ung-tai-trang-cuc-thich-cho-trang-web.html

    Trả lờiXóa
    Trả lời
    1. ok bác...đã cập nhật thông tin code =))

      Xóa
  5. nảy em nhấn ads ủng hộ anh rồi í

    Trả lờiXóa
    Trả lời
    1. em đáng yêu lắm ý haha <3

      Xóa
    2. nhớ ủng hộ em để em lấy mã pin nha :V

      Xóa
    3. 10$ là nó gửi mã về akaka...nhưng mà chờ nó về đến nhà thì hơi gian nan :D

      Xóa
    4. vậy 10$ là rút được rồi hả anh

      Xóa
    5. 100$ cơ anh ơi...10$ mới chỉ là xác minh địa chỉ thôi =))

      Xóa
  6. dễ gây lag blog và bị giảm tốc độ load

    Trả lờiXóa
    Trả lời
    1. Cũng chẳng lag lắm đâu em (y)...cái JS kia chẳng ảnh hưởng mấy :) quan trọng là có thích hay ko thôi :D

      Xóa
  7. đẹp hahaa <3 chúc a buổi chiều vv

    Trả lờiXóa
  8. Chèn ít quảng cáo thôi, để chục cái banner ads nó làm giảm tốc độ load của blog đấy với lại còn lag máy nữa

    Trả lờiXóa
    Trả lời
    1. Ok bác (y) Cơ mà Nâng cấp Ram + SSD lên bác haha...tui load nhanh vch luôn...ra nét càng nhanh :)

      Xóa
  9. E à, a góp ý là e nên bỏ đi 1 bên quảng cáo dưới footer đi, vì nó gây phản cảm với ng đọc đấy

    Trả lờiXóa
    Trả lời
    1. dạ cảm ơn anh đã góp ý ạ...em sẽ khắc phục nó

      Xóa
  10. Trả lời
    1. dạ hahaha...phấn đấu 100$ đã...sắp được rồi nà :D

      Xóa
  11. Ching có temp nào đẹp cho Duy xin 1 cái với ,

    Trả lờiXóa
    Trả lời
    1. dạ có hahaha....nếu anh hỏi thật ko đùa thì ib fb em cho xem demo nà :D

      Xóa
Có Thể Bạn Đang Tìm