Preloader source code for Blogger [Preloading screen HTML]

Preloader code for Blogger - Get here the Preloader source code for your blogger website to add page loading effects when your web page is loading.
Preloader source code for Blogger [Preloading screen HTML]

Get here the Preloader source code for your blogger website to add page loading effects when your web page is loading. You can add this Preloading HTML code Blogger website and any custom website.

Live Demo

Preloader Code for Blogger

----CSS----
<!--Preloader-->
<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:50%;left:49%;z-index:1;height:20px;width:20px;transform:translate(-50%,-50%)}
[class^=&quot;ball-&quot;]{position:absolute;display:block;left:30px;width:6px;height:6px;border-radius:6px;transition:all 0.5s;animation:circleRotate 4s both infinite;transform-origin:0 250% 0}
@keyframes circleRotate{0%{transform:rotate(0deg)}100%{transform:rotate(1440deg)}}
.ball-1{z-index:-1;background-color:#FF5722;animation-timing-function:cubic-bezier(0.5,0.3,0.9,0.9)}.ball-2{z-index:-2;background-color:#f1c40f;animation-timing-function:cubic-bezier(0.5,0.6,0.9,0.9)}.ball-3{z-index:-3;background-color:#FF5722;animation-timing-function:cubic-bezier(0.5,0.9,0.9,0.9)}.ball-4{z-index:-4;background-color:#f1c40f;animation-timing-function:cubic-bezier(0.5,1.2,0.9,0.9)}.ball-5{z-index:-5;background-color:#FF5722;animation-timing-function:cubic-bezier(0.5,1.5,0.9,0.9)}.ball-6{z-index:-6;background-color:#f1c40f;animation-timing-function:cubic-bezier(0.5,1.8,0.9,0.9)}.ball-7{z-index:-7;background-color:#FF5722;animation-timing-function:cubic-bezier(0.5,2.1,0.9,0.9)}.ball-8{z-index:-8;background-color:#f1c40f;animation-timing-function:cubic-bezier(0.5,2.4,0.9,0.9)}
@media screen and (max-width:800px){.spinner{left:43%}}
</style>
----HTML----
<div id='preloader'>
<div class='spinner'>
<span class='ball-1'/>
<span class='ball-2'/>
<span class='ball-3'/>
<span class='ball-4'/>
<span class='ball-5'/>
<span class='ball-6'/>
<span class='ball-7'/>
<span class='ball-8'/>
</div>
</div>
----JS----
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){$("#loader").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>

You may like these posts

  1. To insert a code use <i rel="pre">code_here</i>
  2. To insert a quote use <b rel="quote">your_qoute</b>
  3. To insert a picture use <i rel="image">url_image_here</i>