Khuyễn mãi giảm 30% theme code nhân dịp Xuân Quý Mão 2023 17/01 - 27/01

Hướng dẫn tạo hiệu ứng Preloader đẹp cho blogspot

Hướng dẫn tạo hiệu ứng Preloader đẹp cho blogspot

Cập nhật ngày Bởi
Bài viết này mình hướng dẫn các bạn cài Hiệu ứng Preloader đẹp cho blogspot với nhiều màu đẹp mắt, trong quá trình tải trang hiệu ứng sẽ hiển thị, trang được tải xong thì hiệu ứng sẽ ẩn đi.
Hướng dẫn tạo hiệu ứng Preloader đẹp cho blogspot

Các bước cài đặt Hiệu ứng Preloader đẹp cho blogspot như sau:

Bước 1: Thêm CSS trước thẻ đóng </head>
<style>
  /*<![CDATA[*/
#cssload-loader,#cssload-loader .cssload-dot,.preloader{bottom:0;top:0;left:0;right:0}.preloader{position:fixed;z-index:100;background:#fff;display:block}#cssload-loader{position:absolute;width:105px;height:105px;margin:auto}#cssload-loader .cssload-dot{position:absolute;width:52.5px;height:100%;margin:auto}#cssload-loader .cssload-dot:before{content:'';position:absolute;top:0;left:0;right:0;width:52.5px;height:52.5px;border-radius:100%;transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);-webkit-transform:scale(0);-moz-transform:scale(0)}#cssload-loader .cssload-dot:nth-child(7n+1){transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg)}#cssload-loader .cssload-dot:nth-child(7n+1):before{background:#00ff80;animation:cssload-load 1.16s linear .15s infinite;-o-animation:cssload-load 1.16s linear .15s infinite;-ms-animation:cssload-load 1.16s linear .15s infinite;-webkit-animation:cssload-load 1.16s linear .15s infinite;-moz-animation:cssload-load 1.16s linear .15s infinite}#cssload-loader .cssload-dot:nth-child(7n+2){transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg)}#cssload-loader .cssload-dot:nth-child(7n+2):before{background:#00ffea;animation:cssload-load 1.16s linear .29s infinite;-o-animation:cssload-load 1.16s linear .29s infinite;-ms-animation:cssload-load 1.16s linear .29s infinite;-webkit-animation:cssload-load 1.16s linear .29s infinite;-moz-animation:cssload-load 1.16s linear .29s infinite}#cssload-loader .cssload-dot:nth-child(7n+3){transform:rotate(135deg);-o-transform:rotate(135deg);-ms-transform:rotate(135deg);-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg)}#cssload-loader .cssload-dot:nth-child(7n+3):before{background:#0af;animation:cssload-load 1.16s linear .44s infinite;-o-animation:cssload-load 1.16s linear .44s infinite;-ms-animation:cssload-load 1.16s linear .44s infinite;-webkit-animation:cssload-load 1.16s linear .44s infinite;-moz-animation:cssload-load 1.16s linear .44s infinite}#cssload-loader .cssload-dot:nth-child(7n+4){transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg)}#cssload-loader .cssload-dot:nth-child(7n+4):before{background:#0040ff;animation:cssload-load 1.16s linear .58s infinite;-o-animation:cssload-load 1.16s linear .58s infinite;-ms-animation:cssload-load 1.16s linear .58s infinite;-webkit-animation:cssload-load 1.16s linear .58s infinite;-moz-animation:cssload-load 1.16s linear .58s infinite}#cssload-loader .cssload-dot:nth-child(7n+5){transform:rotate(225deg);-o-transform:rotate(225deg);-ms-transform:rotate(225deg);-webkit-transform:rotate(225deg);-moz-transform:rotate(225deg)}#cssload-loader .cssload-dot:nth-child(7n+5):before{background:#2a00ff;animation:cssload-load 1.16s linear .73s infinite;-o-animation:cssload-load 1.16s linear .73s infinite;-ms-animation:cssload-load 1.16s linear .73s infinite;-webkit-animation:cssload-load 1.16s linear .73s infinite;-moz-animation:cssload-load 1.16s linear .73s infinite}#cssload-loader .cssload-dot:nth-child(7n+6){transform:rotate(270deg);-o-transform:rotate(270deg);-ms-transform:rotate(270deg);-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg)}#cssload-loader .cssload-dot:nth-child(7n+6):before{background:#9500ff;animation:cssload-load 1.16s linear .87s infinite;-o-animation:cssload-load 1.16s linear .87s infinite;-ms-animation:cssload-load 1.16s linear .87s infinite;-webkit-animation:cssload-load 1.16s linear .87s infinite;-moz-animation:cssload-load 1.16s linear .87s infinite}#cssload-loader .cssload-dot:nth-child(7n+7){transform:rotate(315deg)}#cssload-loader .cssload-dot:nth-child(7n+7):before{background:#ff00ff;animation:cssload-load 1.16s linear 1.02s infinite;-o-animation:cssload-load 1.16s linear 1.02s infinite;-ms-animation:cssload-load 1.16s linear 1.02s infinite;-webkit-animation:cssload-load 1.16s linear 1.02s infinite;-moz-animation:cssload-load 1.16s linear 1.02s infinite}#cssload-loader .cssload-dot:nth-child(7n+8){transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg)}#cssload-loader .cssload-dot:nth-child(7n+8):before{background:#ff0095;animation:cssload-load 1.16s linear 1.16s infinite;-o-animation:cssload-load 1.16s linear 1.16s infinite;-ms-animation:cssload-load 1.16s linear 1.16s infinite;-webkit-animation:cssload-load 1.16s linear 1.16s infinite;-moz-animation:cssload-load 1.16s linear 1.16s infinite}@keyframes cssload-load{100%{opacity:0;transform:scale(1)}}@-o-keyframes cssload-load{100%{opacity:0;-o-transform:scale(1)}}@-ms-keyframes cssload-load{100%{opacity:0;-ms-transform:scale(1)}}@-webkit-keyframes cssload-load{100%{opacity:0;-webkit-transform:scale(1)}}@-moz-keyframes cssload-load{100%{opacity:0;-moz-transform:scale(1)}}
  /*]]>*/
</style>

Bước 2: Copy đoạn code dưới dán trước thẻ đóng </body>
<div class='preloader'>
  <div id='cssload-loader'>
    <div class='cssload-dot' />
    <div class='cssload-dot' />
    <div class='cssload-dot' />
    <div class='cssload-dot' />
    <div class='cssload-dot' />
    <div class='cssload-dot' />
    <div class='cssload-dot' />
    <div class='cssload-dot' />
  </div>
</div>
<script>
  //<![CDATA[
  $('.preloader').delay(1000).fadeOut(500);
  //]]>
</script>
Sau đó các bạn lưu lại và kiểm tra kết quả, xem thêm nhiều Hiệu ứng Preloader đẹp cho blogspot

Comments

Call
0948713329
Contact Me on Zalo