How To Create A PreLoader With Css In Your WebSite Blogger / Blogspot

How To Create A PreLoader With Css In Your WebSite Blogger / Blogspot

I am Very Busy But I Am Sharing How To Create A Preloader With Css.
PreLoader With Css
PreLoader With Css

First Go To Your Blogger / Blogspot Admin Panel.
Go To Theme And Edit Html.

Add A Style In Your Template Before Head Tag.
I Mean This Code Paste Before < / head > Tag.

Code Is...
[CODE]
<style type='text/css'>
/*-- Preloader css (start) --*/
#loader{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;
background-color: #ff12cf;
    background-image: -webkit-gradient(linear,left top,right top,from(#ff12cf),to(#4f37ac));
    background-image: linear-gradient(to right,#de11d2,#583dc1);
}

.cssload-wrap {
top:0;left:0;right:0;bottom:0;
position: absolute;
margin: 0 auto 0;
left: 50%;
margin-left: -118px;
transform: rotateX(75deg);
}
.cssload-circle {
position: absolute;
float: left;
border: 1px solid white;
animation: bounce 1.045s infinite ease-in-out alternate;
-o-animation: bounce 1.045s infinite ease-in-out alternate;
-ms-animation: bounce 1.045s infinite ease-in-out alternate;
-webkit-animation: bounce 1.045s infinite ease-in-out alternate;
-moz-animation: bounce 1.045s infinite ease-in-out alternate;
border-radius: 100%;
background: transparent;
top: -39px;
left: -39px;
}
.cssload-circle:nth-child(1) {
margin: 0 155px;
width: 5px;
height: 5px;
animation-delay: 70ms;
-o-animation-delay: 70ms;
-ms-animation-delay: 70ms;
-webkit-animation-delay: 70ms;
-moz-animation-delay: 70ms;
z-index: -1;
border: 1px solid rgba(255,43,0,0.97);
}
.cssload-circle:nth-child(2) {
margin: 0 152px;
width: 10px;
height: 10px;
animation-delay: 140ms;
-o-animation-delay: 140ms;
-ms-animation-delay: 140ms;
-webkit-animation-delay: 140ms;
-moz-animation-delay: 140ms;
z-index: -2;
border: 1px solid rgb(255,85,0);
}
.cssload-circle:nth-child(3) {
margin: 0 150px;
width: 16px;
height: 16px;
animation-delay: 210ms;
-o-animation-delay: 210ms;
-ms-animation-delay: 210ms;
-webkit-animation-delay: 210ms;
-moz-animation-delay: 210ms;
z-index: -3;
border: 1px solid rgb(255,128,0);
}
.cssload-circle:nth-child(4) {
margin: 0 147px;
width: 21px;
height: 21px;
animation-delay: 280ms;
-o-animation-delay: 280ms;
-ms-animation-delay: 280ms;
-webkit-animation-delay: 280ms;
-moz-animation-delay: 280ms;
z-index: -4;
border: 1px solid rgb(255,170,0);
}
.cssload-circle:nth-child(5) {
margin: 0 144px;
width: 26px;
height: 26px;
animation-delay: 350ms;
-o-animation-delay: 350ms;
-ms-animation-delay: 350ms;
-webkit-animation-delay: 350ms;
-moz-animation-delay: 350ms;
z-index: -5;
border: 1px solid rgb(255,213,0);
}
.cssload-circle:nth-child(6) {
margin: 0 142px;
width: 31px;
height: 31px;
animation-delay: 420ms;
-o-animation-delay: 420ms;
-ms-animation-delay: 420ms;
-webkit-animation-delay: 420ms;
-moz-animation-delay: 420ms;
z-index: -6;
border: 1px solid rgb(255,255,0);
}
.cssload-circle:nth-child(7) {
margin: 0 139px;
width: 37px;
height: 37px;
animation-delay: 490ms;
-o-animation-delay: 490ms;
-ms-animation-delay: 490ms;
-webkit-animation-delay: 490ms;
-moz-animation-delay: 490ms;
z-index: -7;
border: 1px solid rgb(212,255,0);
}
.cssload-circle:nth-child(8) {
margin: 0 136px;
width: 42px;
height: 42px;
animation-delay: 560ms;
-o-animation-delay: 560ms;
-ms-animation-delay: 560ms;
-webkit-animation-delay: 560ms;
-moz-animation-delay: 560ms;
z-index: -8;
border: 1px solid rgb(170,255,0);
}
.cssload-circle:nth-child(9) {
margin: 0 134px;
width: 47px;
height: 47px;
animation-delay: 630ms;
-o-animation-delay: 630ms;
-ms-animation-delay: 630ms;
-webkit-animation-delay: 630ms;
-moz-animation-delay: 630ms;
z-index: -9;
border: 1px solid rgb(128,255,0);
}
.cssload-circle:nth-child(10) {
margin: 0 131px;
width: 52px;
height: 52px;
animation-delay: 700ms;
-o-animation-delay: 700ms;
-ms-animation-delay: 700ms;
-webkit-animation-delay: 700ms;
-moz-animation-delay: 700ms;
z-index: -10;
border: 1px solid rgb(85,255,0);
}
.cssload-circle:nth-child(11) {
margin: 0 129px;
width: 58px;
height: 58px;
animation-delay: 770ms;
-o-animation-delay: 770ms;
-ms-animation-delay: 770ms;
-webkit-animation-delay: 770ms;
-moz-animation-delay: 770ms;
z-index: -11;
border: 1px solid rgb(43,255,0);
}
.cssload-circle:nth-child(12) {
margin: 0 126px;
width: 63px;
height: 63px;
animation-delay: 840ms;
-o-animation-delay: 840ms;
-ms-animation-delay: 840ms;
-webkit-animation-delay: 840ms;
-moz-animation-delay: 840ms;
z-index: -12;
border: 1px solid rgb(0,255,0);
}
.cssload-circle:nth-child(13) {
margin: 0 123px;
width: 68px;
height: 68px;
animation-delay: 910ms;
-o-animation-delay: 910ms;
-ms-animation-delay: 910ms;
-webkit-animation-delay: 910ms;
-moz-animation-delay: 910ms;
z-index: -13;
border: 1px solid rgb(0,255,43);
}
.cssload-circle:nth-child(14) {
margin: 0 121px;
width: 73px;
height: 73px;
animation-delay: 980ms;
-o-animation-delay: 980ms;
-ms-animation-delay: 980ms;
-webkit-animation-delay: 980ms;
-moz-animation-delay: 980ms;
z-index: -14;
border: 1px solid rgb(0,255,85);
}
.cssload-circle:nth-child(15) {
margin: 0 118px;
width: 79px;
height: 79px;
animation-delay: 1050ms;
-o-animation-delay: 1050ms;
-ms-animation-delay: 1050ms;
-webkit-animation-delay: 1050ms;
-moz-animation-delay: 1050ms;
z-index: -15;
border: 1px solid rgba(0,255,128,0.66);
}
.cssload-circle:nth-child(16) {
margin: 0 115px;
width: 84px;
height: 84px;
animation-delay: 1120ms;
-o-animation-delay: 1120ms;
-ms-animation-delay: 1120ms;
-webkit-animation-delay: 1120ms;
-moz-animation-delay: 1120ms;
z-index: -16;
border: 1px solid rgba(0,255,170,0.67);
}
.cssload-circle:nth-child(17) {
margin: 0 113px;
width: 89px;
height: 89px;
animation-delay: 1190ms;
-o-animation-delay: 1190ms;
-ms-animation-delay: 1190ms;
-webkit-animation-delay: 1190ms;
-moz-animation-delay: 1190ms;
z-index: -17;
border: 1px solid rgba(0, 255, 213, 0.7);
}
.cssload-circle:nth-child(18) {
margin: 0 110px;
width: 94px;
height: 94px;
animation-delay: 1260ms;
-o-animation-delay: 1260ms;
-ms-animation-delay: 1260ms;
-webkit-animation-delay: 1260ms;
-moz-animation-delay: 1260ms;
z-index: -18;
border: 1px solid rgba(0, 255, 255, 0.7);
}
.cssload-circle:nth-child(19) {
margin: 0 108px;
width: 100px;
height: 100px;
animation-delay: 1330ms;
-o-animation-delay: 1330ms;
-ms-animation-delay: 1330ms;
-webkit-animation-delay: 1330ms;
-moz-animation-delay: 1330ms;
z-index: -19;
border: 1px solid rgba(0, 212, 255, 0.7);
}
.cssload-circle:nth-child(20) {
margin: 0 105px;
width: 105px;
height: 105px;
animation-delay: 1400ms;
-o-animation-delay: 1400ms;
-ms-animation-delay: 1400ms;
-webkit-animation-delay: 1400ms;
-moz-animation-delay: 1400ms;
z-index: -20;
border: 1px solid rgba(0, 170, 255, 0.7);
}
.cssload-circle:nth-child(21) {
margin: 0 102px;
width: 110px;
height: 110px;
animation-delay: 1470ms;
-o-animation-delay: 1470ms;
-ms-animation-delay: 1470ms;
-webkit-animation-delay: 1470ms;
-moz-animation-delay: 1470ms;
z-index: -21;
border: 1px solid rgba(0, 127, 255, 0.7);
}
.cssload-circle:nth-child(22) {
margin: 0 100px;
width: 115px;
height: 115px;
animation-delay: 1540ms;
-o-animation-delay: 1540ms;
-ms-animation-delay: 1540ms;
-webkit-animation-delay: 1540ms;
-moz-animation-delay: 1540ms;
z-index: -22;
border: 1px solid rgba(0, 85, 255, 0.7);
}
.cssload-circle:nth-child(23) {
margin: 0 97px;
width: 121px;
height: 121px;
animation-delay: 1610ms;
-o-animation-delay: 1610ms;
-ms-animation-delay: 1610ms;
-webkit-animation-delay: 1610ms;
-moz-animation-delay: 1610ms;
z-index: -23;
border: 1px solid rgba(0, 43, 255, 0.7);
}
.cssload-circle:nth-child(24) {
margin: 0 94px;
width: 126px;
height: 126px;
animation-delay: 1680ms;
-o-animation-delay: 1680ms;
-ms-animation-delay: 1680ms;
-webkit-animation-delay: 1680ms;
-moz-animation-delay: 1680ms;
z-index: -24;
border: 1px solid rgba(0, 0, 255, 0.7);
}
.cssload-circle:nth-child(25) {
margin: 0 92px;
width: 131px;
height: 131px;
animation-delay: 1750ms;
-o-animation-delay: 1750ms;
-ms-animation-delay: 1750ms;
-webkit-animation-delay: 1750ms;
-moz-animation-delay: 1750ms;
z-index: -25;
border: 1px solid rgba(42, 0, 255, 0.7);
}
.cssload-circle:nth-child(26) {
margin: 0 89px;
width: 136px;
height: 136px;
animation-delay: 1820ms;
-o-animation-delay: 1820ms;
-ms-animation-delay: 1820ms;
-webkit-animation-delay: 1820ms;
-moz-animation-delay: 1820ms;
z-index: -26;
border: 1px solid rgba(85, 0, 255, 0.7);
}
.cssload-circle:nth-child(27) {
margin: 0 87px;
width: 142px;
height: 142px;
animation-delay: 1890ms;
-o-animation-delay: 1890ms;
-ms-animation-delay: 1890ms;
-webkit-animation-delay: 1890ms;
-moz-animation-delay: 1890ms;
z-index: -27;
border: 1px solid rgba(127, 0, 255, 0.7);
}
.cssload-circle:nth-child(28) {
margin: 0 84px;
width: 147px;
height: 147px;
animation-delay: 1960ms;
-o-animation-delay: 1960ms;
-ms-animation-delay: 1960ms;
-webkit-animation-delay: 1960ms;
-moz-animation-delay: 1960ms;
z-index: -28;
border: 1px solid rgba(170, 0, 255, 0.7);
}
.cssload-circle:nth-child(29) {
margin: 0 81px;
width: 152px;
height: 152px;
animation-delay: 2030ms;
-o-animation-delay: 2030ms;
-ms-animation-delay: 2030ms;
-webkit-animation-delay: 2030ms;
-moz-animation-delay: 2030ms;
z-index: -29;
border: 1px solid rgba(212, 0, 255, 0.7);
}
.cssload-circle:nth-child(30) {
margin: 0 79px;
width: 157px;
height: 157px;
animation-delay: 2100ms;
-o-animation-delay: 2100ms;
-ms-animation-delay: 2100ms;
-webkit-animation-delay: 2100ms;
-moz-animation-delay: 2100ms;
z-index: -30;
border: 1px solid rgba(255, 0, 255, 0.7);
}


@keyframes bounce {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(52px);
}
}

@-o-keyframes bounce {
0% {
-o-transform: translateY(0px);
}
100% {
-o-transform: translateY(52px);
}
}

@-ms-keyframes bounce {
0% {
-ms-transform: translateY(0px);
}
100% {
-ms-transform: translateY(52px);
}
}

@-webkit-keyframes bounce {
0% {
-webkit-transform: translateY(0px);
}
100% {
-webkit-transform: translateY(52px);
}
}

@-moz-keyframes bounce {
0% {
-moz-transform: translateY(0px);
}
100% {
-moz-transform: translateY(52px);
}
}
/*-- Preloader css (end) --*/
</style>
[/CODE]

Again Go To < body > Tag.
And Paste This Code In Body Tag.
Code Is...
[CODE]
<!-- Preloader (Start) -->
<div id='loader'>
<div class='spinner'>

<div class='cssload-wrap'>
<div class='cssload-circle'/>
<div class='cssload-circle'/>
<div class='cssload-circle'/>
<div class='cssload-circle'/>
<div class='cssload-circle'/>
<div class='cssload-circle'/>
<div class='cssload-circle'/>
<div class='cssload-circle'/>
<div class='cssload-circle'/>
<div class='cssload-circle'/>
<div class='cssload-circle'/>
<div class='cssload-circle'/>
<div class='cssload-circle'/>
<div class='cssload-circle'/>
<div class='cssload-circle'/>
<div class='cssload-circle'/>
<div class='cssload-circle'/>
<div class='cssload-circle'/>
<div class='cssload-circle'/>
<div class='cssload-circle'/>
<div class='cssload-circle'/>
<div class='cssload-circle'/>
<div class='cssload-circle'/>
<div class='cssload-circle'/>
<div class='cssload-circle'/>
<div class='cssload-circle'/>
<div class='cssload-circle'/>
<div class='cssload-circle'/>
<div class='cssload-circle'/>
<div class='cssload-circle'/>
</div>

  </div>
</div>
<!-- Preloader (End) -->
[/CODE]


Again Go To < / body > Tag.
And Paste This Code Before The < / body > Tag.
Code Is...
[CODE]
<!-- Preloader js start -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
    <script type='text/javascript'>
        $(window).load(function () {
            setTimeout(function () {
                $(&quot;.spinner&quot;).fadeOut(&quot;slow&quot;);
                setTimeout(function () {
                    $(&quot;#loader&quot;).fadeOut(&quot;slow&quot;)
                }, 1000)
            }, 1000)
        });
    </script>
<!-- Preloader js end -->
[/CODE]


NB: Remove All Star (*)

Thanks All Done.
Face You Any Problem.
Full Free Mind Tell Me.

By

SMsudipBD.Com
পোস্ট রেটিং করুন
ট্যাগঃ
About Author
2 comments
Sort by