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

<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>

<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>