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

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 :)
Tác giả: Lê ANh Đức

Tôi là Lê Anh Đức


  • - Đời người có ai là hoàn hảo ? Bởi thế, trong quá trình viết bài tôi có thể tôi sẽ có nhiều sai sót. Rất mong các bạn góp ý để tôi dần hoàn thiện hơn
    - Mọi ý kiến , thắc mắc xin vui lòng liên hệ:
    • Email: www.leanhduc.tk@gmail.com
    • Facebook: Lê Anh Đức
    ^_^
    =r
    :))
    ;)
    =))
    :((
    <3
    ==
    :v
    :)
    :(
    :*
    :D
    (yy)
    (y)
    =hi
    :P
    =s
    =ok
    =clap
    =he
    =hl
    =hr
    :-)
    =hup
    =hd
    =l
    =ht
    =aa
    =no
    =hum
    =haizz
    =ask

    50 nhận xét:

    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. https://www.toishare.net/2018/08/tao-hieu-ung-tai-trang-cuc-thich-cho-trang-web.html

      Trả lờiXóa
    4. 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
    5. 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
    6. đẹp hahaa <3 chúc a buổi chiều vv

      Trả lờiXóa
    7. 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
    8. 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
    9. 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

    Một số lưu ý khi bình luận

    Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

    Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

    Để bình luận một đoạn code, hãy mã hóa code trước nhé !

    Xem hướng dẫn bình luận tại đây

    HƯỚNG DẪN BÌNH LUẬN

    Chèn link

    Sử dụng thẻ sau: <a href='LINK'>TÊN_HIỂN_THỊ</a>

    Chèn hình ảnh

    [img] LINK_ANH [/img]Sử dụng công cụ upload ảnh tại đây

    Định dạng chữ

    <b> Chữ in đậm </b>
    <i> Chữ in nghiêng </i>
    <u> Chữ gạch chân </u>
    <strike> Chữ gạch ngang </strike>

    Chèn một đoạn Code

    Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
    Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

    Đã hiểu
    Liên hệ hợp tác & phát triển
    www.leanhduc.tk@gmail.com