Hard Game: 3 Macam Loading Untuk Blog CSS

Monday, January 2, 2017

3 Macam Loading Untuk Blog CSS

Kumpulan Tips dan Triks Web Blog - 3 Macam Loading Untuk Blog CSS. Sebelumnya telah ada beberapa loading yang sudah saya share, dan ini ketambahan beberapa lagi untuk koleksi pribadi, tapi ente juga bisa makek kalau mau ...

Berbagai Macam Loading Untuk Blog CSS

CSS [taruh diatas ]]></b:skin>]:

#outer-barG{height:37px;width:128px;
border:2px solid #3F5EFA;overflow:hidden;
background-color:#0D0C0D}
.bar-lineG{background-color:#3F5EFA;
float:left;width:18px;height:120px;margin-right:24px;margin-top:-28px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.bar-animationG{margin-left:168px;width:168px;
-moz-animation-name:bar-animationG;
-moz-animation-duration:1.8s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-animation-name:bar-animationG;
-webkit-animation-duration:1.8s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-animation-name:bar-animationG;
-ms-animation-duration:1.8s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-animation-name:bar-animationG;
-o-animation-duration:1.8s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
animation-name:bar-animationG;
animation-duration:1.8s;
animation-iteration-count:infinite;
animation-direction:linear;}
#front-barG{}
@-moz-keyframes bar-animationG{0%{margin-left:155px;margin-top:-18px}
100%{margin-left:-128px;margin-top:-18px}}
@-webkit-keyframes bar-animationG{0%{margin-left:155px;margin-top:-18px}
100%{margin-left:-128px;margin-top:-18px}}
@-ms-keyframes bar-animationG{0%{margin-left:155px;margin-top:-18px}
100%{margin-left:-128px;margin-top:-18px}}
@-o-keyframes bar-animationG{0%{margin-left:155px;margin-top:-18px}
100%{margin-left:-128px;margin-top:-18px}}
@keyframes bar-animationG{0%{margin-left:155px;margin-top:-18px}
100%{margin-left:-128px;margin-top:-18px}}

HTML :

<div id="outer-barG">
<div id="front-barG" class="bar-animationG">
<div id="barG_1" class="bar-lineG">
</div>
<div id="barG_2" class="bar-lineG">
</div>
<div id="barG_3" class="bar-lineG">
</div></div></div>

Demo :

PART.2
CSS :

#warningGradientOuterBarG{
height:40px;width:320px;border:2px solid #F708BF;
overflow:hidden;background-color:#FAFAFA;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FAFAFA), to(#F708BF));
background: -moz-linear-gradient(top, #FAFAFA, #F708BF);
background: -webkit-linear-gradient(top, #FAFAFA, #F708BF);
background: -ms-linear-gradient(top, #FAFAFA, #F708BF);
background: -o-linear-gradient(top, #FAFAFA, #F708BF);
background: linear-gradient(top, #FAFAFA, #F708BF);
}
.warningGradientBarLineG{background-color:#FAFAFA;float:left;
width:28px;height:240px;
margin-right:48px;margin-top:-56px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);}
.warningGradientAnimationG{width:472px;
-moz-animation-name:warningGradientAnimationG;
-moz-animation-duration:1s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
-webkit-animation-name:warningGradientAnimationG;
-webkit-animation-duration:1s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-ms-animation-name:warningGradientAnimationG;
-ms-animation-duration:1s;
-ms-animation-iteration-count:infinite;
-ms-animation-timing-function:linear;
-o-animation-name:warningGradientAnimationG;
-o-animation-duration:1s;
-o-animation-iteration-count:infinite;
-o-animation-timing-function:linear;
animation-name:warningGradientAnimationG;
animation-duration:1s;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
#warningGradientFrontBarG{}
@-moz-keyframes warningGradientAnimationG{0%{margin-left:0px;}
100%{margin-left:-76px;}}
@-webkit-keyframes warningGradientAnimationG{0%{margin-left:0px;}
100%{margin-left:-76px;}}
@-ms-keyframes warningGradientAnimationG{0%{margin-left:0px;}
100%{margin-left:-76px;}}
@-o-keyframes warningGradientAnimationG{0%{margin-left:0px;}
100%{margin-left:-76px;}}
@keyframes warningGradientAnimationG{0%{margin-left:0px;}
100%{margin-left:-76px;}}

HTML :

<div id="warningGradientOuterBarG">
<div id="warningGradientFrontBarG" class="warningGradientAnimationG">
<div class="warningGradientBarLineG">
</div>
<div class="warningGradientBarLineG">
</div>
<div class="warningGradientBarLineG">
</div>
<div class="warningGradientBarLineG">
</div>
<div class="warningGradientBarLineG">
</div>
<div class="warningGradientBarLineG">
</div>
</div>
</div>

DEMO :

PART.3
HTML :

<div id="block_1" class="barlittle"></div>
<div id="block_2" class="barlittle"></div>
<div id="block_3" class="barlittle"></div>
<div id="block_4" class="barlittle"></div>
<div id="block_5" class="barlittle"></div>

CSS :

.barlittle {
background-color:#2187e7;
background-image: -moz-linear-gradient(45deg, #2187e7 25%, #a0eaff);
background-image: -webkit-linear-gradient(45deg, #2187e7 25%, #a0eaff);
border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333;
width:10px;
height:10px;
float:left;
margin-left:5px;
opacity:0.1;
-moz-transform:scale(0.7);
-webkit-transform:scale(0.7);
-moz-animation:move 1s infinite linear;
-webkit-animation:move 1s infinite linear;
}
#block_1{
-moz-animation-delay: .4s;
-webkit-animation-delay: .4s;
}
#block_2{
-moz-animation-delay: .3s;
-webkit-animation-delay: .3s;
}
#block_3{
-moz-animation-delay: .2s;
-webkit-animation-delay: .2s;
}
#block_4{
-moz-animation-delay: .3s;
-webkit-animation-delay: .3s;
}
#block_5{
-moz-animation-delay: .4s;
-webkit-animation-delay: .4s;
}
@-moz-keyframes move{
0%{-moz-transform: scale(1.2);opacity:1;}
100%{-moz-transform: scale(0.7);opacity:0.1;}
}
@-webkit-keyframes move{
0%{-webkit-transform: scale(1.2);opacity:1;}
100%{-webkit-transform: scale(0.7);opacity:0.1;}
}

DEMO :

3 Loading yang bisa saya tuliskan dikoleksi terbaru Blog ini.

Available link for download