Sandy-Cyber

Hai sob, apa kabar? Berhubung blog saya baru saja mengganti template dan kebetulan template ini memakai animasi loading halaman, maka saya akan berbagi Tutorial untuk membuat animasi loading tersebut, Tutorial Membuat Animasi Loading Blog dengan CSS3 dalam 6 Variasi Loader.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

 dan pastekan tepat diatas kode  <b:skin><![CDATA[

/* X-Gen Loader */
#xgenloader-screen {z-index:999999;background:#000;width:100%;height:100%;position:fixed !important;position:absolute;top:0;right:0;bottom:0;left:0;text-shadow:none;}
/* DEMO 1 */
#horizontal-load body:after {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: -webkit-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));
    background: -moz-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));
    background: -ms-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));
    background: -o-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));
    background: radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));
}
#horizontal-load .bar {
font-size: 20px;
    width: 10em;
    height: 1em;
    position: relative;
    margin: 100px auto;
    border-radius: .5em;
    background: rgba(255,255,255,0.6);
    box-shadow:
        0 0 0 .05em rgba(100,100,100,0.075),
        0 0 0 .25em rgba(0,0,0,0.1),
        inset 0 .1em .05em rgba(0,0,0,0.1),
        0 .05em rgba(255,255,255,0.7);
}
#horizontal-load .bar:after {
    content: "Please wait.";
    position: absolute;
    left: 25%;
    top: 150%;
    font-family: 'Carrois Gothic', sans-serif;
    font-size: 1em;
    color: #555;
    text-shadow: 0 .05em rgba(255,255,255,0.7);
}
#horizontal-load .bar .sphere {
    border-radius: 50%;
    width: 1em;
    height: 100%;
    background: -webkit-linear-gradient(#eee, #ddd);
    background: -moz-linear-gradient(#eee, #ddd);
    background: -ms-linear-gradient(#eee, #ddd);
    background: -o-linear-gradient(#eee, #ddd);
    background: linear-gradient(#eee, #ddd);
    box-shadow:
        inset 0 .15em .1em rgba(255,255,255,0.3),
        inset 0 -.1em .15em rgba(0,0,0,0.15),
        0 0 .25em rgba(0,0,0,0.3);
    display: block;
    -webkit-animation: slide 1.75s ease-in-out infinite alternate;
    -moz-animation: slide 1.75s ease-in-out infinite alternate;
    -ms-animation: slide 1.75s ease-in-out infinite alternate;
    -o-animation: slide 1.75s ease-in-out infinite alternate;
    animation: slide 1.75s ease-in-out infinite alternate;
}
@-webkit-keyframes slide {
    to { margin-left: 90%; }
}
@-moz-keyframes slide {
    to { margin-left: 90%; }
}
@-ms-keyframes slide {
    to { margin-left: 90%; }
}
@-o-keyframes slide {
    to { margin-left: 90%; }
}
@keyframes slide {
    to { margin-left: 90%; }
}

<!-- Start Andi-Techno.blogspot.com Loader -->
<script type='text/javascript'>
//<![CDATA[
$(function() {
    setTimeout(function() {
        $('#xgenloader-screen').fadeOut();
    }, 5000);
});
//]]>
</script>
<div id='xgenloader-screen'><div id="horizontal-load"><div class="bar">
<i class="sphere"></i>
</div></div>
</div>
<!-- End Loader -->

Klik Pratinjau, kalau loading muncul silahkan simpan template

# Style 2

/* X-Gen Loader */
#xgenloader-screen {z-index:999999;background:#000;width:100%;height:100%;position:fixed !important;position:absolute;top:0;right:0;bottom:0;left:0;text-shadow:none;}

#load2 body {
    background-image: url(../images/hexabump.png);
    background-color: #222;
}
#load2 body:after {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: -webkit-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
    background: -moz-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
    background: -ms-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
    background: -o-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
    background: radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
}
#load2 .spinner {
    position: relative;
    font-size: 100px;
    width: 1em;
    height: 1em;
    margin: 100px auto;
    border-radius: 50%;
    background: #123456;
    box-shadow: inset 0 0 0 .12em rgba(0,0,0,0.2), 0 0 0 .12em rgba(255,255,255,0.1);
    background:
        -webkit-linear-gradient(#ea2d0e 50%, #fcd883 50%),
        -webkit-linear-gradient(#fcd883 50%, #ea2d0e 50%);
    background:
        -moz-linear-gradient(#ea2d0e 50%, #ffdd72 50%),
        -moz-linear-gradient(#ffdd72 50%, #ea2d0e 50%);
    background:
        -ms-linear-gradient(#ea2d0e 50%, #ffdd72 50%),
        -ms-linear-gradient(#ffdd72 50%, #ea2d0e 50%);
    background:
        -o-linear-gradient(#ea2d0e 50%, #ffdd72 50%),
        -o-linear-gradient(#ffdd72 50%, #ea2d0e 50%);
    background:
        linear-gradient(#ea2d0e 50%, #ffdd72 50%),
        linear-gradient(#ffdd72 50%, #ea2d0e 50%);
    background-size: 50% 100%, 50% 100%;
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
    opacity: 0.7;
    -webkit-animation: mask 3s infinite alternate;
    -moz-animation: mask 3s infinite alternate;
    -ms-animation: mask 3s infinite alternate;
    -o-animation: mask 3s infinite alternate;
    animation: mask 3s infinite alternate;
}

@-webkit-keyframes mask {
    25%  { -webkit-transform: rotate(270deg); }
    50%  { -webkit-transform: rotate( 90deg); }
    75%  { -webkit-transform: rotate(360deg); }
    100% { -webkit-transform: rotate(180deg); }
}
@-moz-keyframes mask {
    25%  { -moz-transform: rotate(270deg); }
    50%  { -moz-transform: rotate( 90deg); }
    75%  { -moz-transform: rotate(360deg); }
    100% { -moz-transform: rotate(180deg); }
}
@-ms-keyframes mask {
    25%  { -ms-transform: rotate(270deg); }
    50%  { -ms-transform: rotate( 90deg); }
    75%  { -ms-transform: rotate(360deg); }
    100% { -ms-transform: rotate(180deg); }
}
@-o-keyframes mask {
    25%  { -o-transform: rotate(270deg); }
    50%  { -o-transform: rotate( 90deg); }
    75%  { -o-transform: rotate(360deg); }
    100% { -o-transform: rotate(180deg); }
}
@keyframes mask {
    25%  { transform: rotate(270deg); }
    50%  { transform: rotate( 90deg); }
    75%  { transform: rotate(360deg); }
    100% { transform: rotate(180deg); }
}

/* X-Gen Loader */
#xgenloader-screen {z-index:999999;background:#000;width:100%;height:100%;position:fixed !important;position:absolute;top:0;right:0;bottom:0;left:0;text-shadow:none;}
#bowlG{
position:relative;
width:128px;
height:128px;margin:20% auto;
}
#bowl_ringG{
position:absolute;
width:128px;
height:128px;
border:11px solid #5C5C5C;
-moz-border-radius:128px;
-webkit-border-radius:128px;
-ms-border-radius:128px;
-o-border-radius:128px;
border-radius:128px;
}
.ball_holderG{
position:absolute;
width:34px;
height:128px;
left:47px;
top:0px;
-moz-animation-name:ball_moveG;
-moz-animation-duration:1.3s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
-webkit-animation-name:ball_moveG;
-webkit-animation-duration:1.3s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-ms-animation-name:ball_moveG;
-ms-animation-duration:1.3s;
-ms-animation-iteration-count:infinite;
-ms-animation-timing-function:linear;
-o-animation-name:ball_moveG;
-o-animation-duration:1.3s;
-o-animation-iteration-count:infinite;
-o-animation-timing-function:linear;
animation-name:ball_moveG;
animation-duration:1.3s;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
.ballG{
position:absolute;
left:0px;
top:-30px;
width:51px;
height:51px;
background:#FF0000;
-moz-border-radius:43px;
-webkit-border-radius:43px;
-ms-border-radius:43px;
-o-border-radius:43px;
border-radius:43px;
}
@-moz-keyframes ball_moveG{
0%{
-moz-transform:rotate(0deg)}
100%{
-moz-transform:rotate(360deg)}
}
@-webkit-keyframes ball_moveG{
0%{
-webkit-transform:rotate(0deg)}
100%{
-webkit-transform:rotate(360deg)}
}
@-ms-keyframes ball_moveG{
0%{
-ms-transform:rotate(0deg)}
100%{
-ms-transform:rotate(360deg)}
}
@-o-keyframes ball_moveG{
0%{
-o-transform:rotate(0deg)}
100%{
-o-transform:rotate(360deg)}
}
@keyframes ball_moveG{
0%{
transform:rotate(0deg)}
100%{
transform:rotate(360deg)}
}

<!-- Start Andi-Techno.blogspot.com Loader -->
<script type='text/javascript'>
//<![CDATA[
$(function() {
    setTimeout(function() {
        $('#xgenloader-screen').fadeOut();
    }, 5000);
});
//]]>
</script>
<div id='xgenloader-screen'><div id="bowlG">
<div id="bowl_ringG">
<div class="ball_holderG">
<div class="ballG">
</div>
</div>
</div>
</div>
</div>
<!-- End Loader -->

Klik Pratinjau, kalau loading muncul silahkan simpan template

/* X-Gen Loader */
#xgenloader-screen {z-index:999999;background:#000;width:100%;height:100%;position:fixed !important;position:absolute;top:0;right:0;bottom:0;left:0;text-shadow:none;}
#circular3dG{
position:relative;
width:100px;
height:100px;margin:10% auto;
}
.circular3dG{
position:absolute;
background-color:#00C4FF;
width:28px;
height:28px;
-moz-border-radius:30px;
-moz-animation-name:bounce_circular3dG;
-moz-animation-duration:0.48s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:30px;
-webkit-animation-name:bounce_circular3dG;
-webkit-animation-duration:0.48s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-border-radius:30px;
-ms-animation-name:bounce_circular3dG;
-ms-animation-duration:0.48s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-border-radius:30px;
-o-animation-name:bounce_circular3dG;
-o-animation-duration:0.48s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
border-radius:30px;
animation-name:bounce_circular3dG;
animation-duration:0.48s;
animation-iteration-count:infinite;
animation-direction:linear;
}
#circular3d_1G{
left:41px;
top:6px;
-moz-animation-delay:0.18s;
-webkit-animation-delay:0.18s;
-ms-animation-delay:0.18s;
-o-animation-delay:0.18s;
animation-delay:0.18s;
}
#circular3d_2G{
left:61px;
top:23px;
-moz-animation-delay:0.24s;
-webkit-animation-delay:0.24s;
-ms-animation-delay:0.24s;
-o-animation-delay:0.24s;
animation-delay:0.24s;
}
#circular3d_3G{
left:73px;
top:45px;
-moz-animation-delay:0.3s;
-webkit-animation-delay:0.3s;
-ms-animation-delay:0.3s;
-o-animation-delay:0.3s;
animation-delay:0.3s;
}
#circular3d_4G{
left:69px;
top:67px;
-moz-animation-delay:0.36s;
-webkit-animation-delay:0.36s;
-ms-animation-delay:0.36s;
-o-animation-delay:0.36s;
animation-delay:0.36s;
}
#circular3d_5G{
left:42px;
top:73px;
-moz-animation-delay:0.42000000000000004s;
-webkit-animation-delay:0.42000000000000004s;
-ms-animation-delay:0.42000000000000004s;
-o-animation-delay:0.42000000000000004s;
animation-delay:0.42000000000000004s;
}
#circular3d_6G{
left:8px;
top:48px;
-moz-animation-delay:0.48s;
-webkit-animation-delay:0.48s;
-ms-animation-delay:0.48s;
-o-animation-delay:0.48s;
animation-delay:0.48s;
}
#circular3d_7G{
left:0px;
top:14px;
-moz-animation-delay:0.5399999999999999s;
-webkit-animation-delay:0.5399999999999999s;
-ms-animation-delay:0.5399999999999999s;
-o-animation-delay:0.5399999999999999s;
animation-delay:0.5399999999999999s;
}
#circular3d_8G{
left:17px;
top:0px;
-moz-animation-delay:0.6s;
-webkit-animation-delay:0.6s;
-ms-animation-delay:0.6s;
-o-animation-delay:0.6s;
animation-delay:0.6s;
}
@-moz-keyframes bounce_circular3dG{
0%{
-moz-transform:scale(1)}
100%{
-moz-transform:scale(.3)}
}
@-webkit-keyframes bounce_circular3dG{
0%{
-webkit-transform:scale(1)}
100%{
-webkit-transform:scale(.3)}
}
@-ms-keyframes bounce_circular3dG{
0%{
-ms-transform:scale(1)}
100%{
-ms-transform:scale(.3)}
}
@-o-keyframes bounce_circular3dG{
0%{
-o-transform:scale(1)}
100%{
-o-transform:scale(.3)}
}
@keyframes bounce_circular3dG{
0%{
transform:scale(1)}
100%{
transform:scale(.3)}
}

<!-- Start Andi-Techno.blogspot.com Loader -->
<script type='text/javascript'>
//<![CDATA[
$(function() {
    setTimeout(function() {
        $('#xgenloader-screen').fadeOut();
    }, 5000);
});
//]]>
</script>
<div id='xgenloader-screen'><div id="circular3dG">
<div id="circular3d_1G" class="circular3dG">
</div>
<div id="circular3d_2G" class="circular3dG">
</div>
<div id="circular3d_3G" class="circular3dG">
</div>
<div id="circular3d_4G" class="circular3dG">
</div>
<div id="circular3d_5G" class="circular3dG">
</div>
<div id="circular3d_6G" class="circular3dG">
</div>
<div id="circular3d_7G" class="circular3dG">
</div>
<div id="circular3d_8G" class="circular3dG">
</div>
</div>
</div>
<!-- End Loader -->

Klik Pratinjau, kalau loading muncul silahkan simpan template

# Style 5

/* X-Gen Loader */
#xgenloader-screen {z-index:999999;background:#000;width:100%;height:100%;position:fixed !important;position:absolute;top:0;right:0;bottom:0;left:0;text-shadow:none;}

.bubblingG {
text-align: center;
width:100px;
height:63px;margin:10% auto;
}
.bubblingG span {
display: inline-block;
vertical-align: middle;
width: 13px;
height: 13px;
margin: 31px auto;
background: #7BFF00;
-moz-border-radius: 63px;
-moz-animation: bubblingG 0.6s infinite alternate;
-webkit-border-radius: 63px;
-webkit-animation: bubblingG 0.6s infinite alternate;
-ms-border-radius: 63px;
-ms-animation: bubblingG 0.6s infinite alternate;
-o-border-radius: 63px;
-o-animation: bubblingG 0.6s infinite alternate;
border-radius: 63px;
animation: bubblingG 0.6s infinite alternate;
}
#bubblingG_1 {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
-ms-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}
#bubblingG_2 {
-moz-animation-delay: 0.18s;
-webkit-animation-delay: 0.18s;
-ms-animation-delay: 0.18s;
-o-animation-delay: 0.18s;
animation-delay: 0.18s;
}
#bubblingG_3 {
-moz-animation-delay: 0.36s;
-webkit-animation-delay: 0.36s;
-ms-animation-delay: 0.36s;
-o-animation-delay: 0.36s;
animation-delay: 0.36s;
}
@-moz-keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
-moz-transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
-moz-transform: translateY(-26px);
}
}
@-webkit-keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
-webkit-transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
-webkit-transform: translateY(-26px);
}
}
@-ms-keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
-ms-transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
-ms-transform: translateY(-26px);
}
}
@-o-keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
-o-transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
-o-transform: translateY(-26px);
}
}
@keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
transform: translateY(-26px);
}
}

<!-- Start Andi-Techno.blogspot.com Loader -->
<script type='text/javascript'>
//<![CDATA[
$(function() {
    setTimeout(function() {
        $('#xgenloader-screen').fadeOut();
    }, 5000);
});
//]]>
</script>
<div id='xgenloader-screen'><div class="bubblingG">
<span id="bubblingG_1">
</span>
<span id="bubblingG_2">
</span>
<span id="bubblingG_3">
</span>
</div>
</div>
<!-- End Loader -->

Klik Pratinjau, kalau loading muncul silahkan simpan template

# Style 6

/* X-Gen Loader */
#xgenloader-screen {z-index:999999;background:#000;width:100%;height:100%;position:fixed !important;position:absolute;top:0;right:0;bottom:0;left:0;text-shadow:none;}
#spinningSquaresG{
position:relative;
width:240px;
height:29px;margin:10% auto;}
.spinningSquaresG{
position:absolute;
top:0;
background-color:#FFDD00;
width:29px;
height:29px;
-moz-animation-name:bounce_spinningSquaresG;
-moz-animation-duration:0.6s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-moz-transform:scale(.3);
-webkit-animation-name:bounce_spinningSquaresG;
-webkit-animation-duration:0.6s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-webkit-transform:scale(.3);
-ms-animation-name:bounce_spinningSquaresG;
-ms-animation-duration:0.6s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-ms-transform:scale(.3);
-o-animation-name:bounce_spinningSquaresG;
-o-animation-duration:0.6s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
-o-transform:scale(.3);
animation-name:bounce_spinningSquaresG;
animation-duration:0.6s;
animation-iteration-count:infinite;
animation-direction:linear;
transform:scale(.3);
}
#spinningSquaresG_1{
left:0;
-moz-animation-delay:0.24s;
-webkit-animation-delay:0.24s;
-ms-animation-delay:0.24s;
-o-animation-delay:0.24s;
animation-delay:0.24s;
}
#spinningSquaresG_2{
left:30px;
-moz-animation-delay:0.3s;
-webkit-animation-delay:0.3s;
-ms-animation-delay:0.3s;
-o-animation-delay:0.3s;
animation-delay:0.3s;
}
#spinningSquaresG_3{
left:60px;
-moz-animation-delay:0.36s;
-webkit-animation-delay:0.36s;
-ms-animation-delay:0.36s;
-o-animation-delay:0.36s;
animation-delay:0.36s;
}
#spinningSquaresG_4{
left:90px;
-moz-animation-delay:0.42s;
-webkit-animation-delay:0.42s;
-ms-animation-delay:0.42s;
-o-animation-delay:0.42s;
animation-delay:0.42s;
}
#spinningSquaresG_5{
left:120px;
-moz-animation-delay:0.48s;
-webkit-animation-delay:0.48s;
-ms-animation-delay:0.48s;
-o-animation-delay:0.48s;
animation-delay:0.48s;
}
#spinningSquaresG_6{
left:150px;
-moz-animation-delay:0.54s;
-webkit-animation-delay:0.54s;
-ms-animation-delay:0.54s;
-o-animation-delay:0.54s;
animation-delay:0.54s;
}
#spinningSquaresG_7{
left:180px;
-moz-animation-delay:0.6s;
-webkit-animation-delay:0.6s;
-ms-animation-delay:0.6s;
-o-animation-delay:0.6s;
animation-delay:0.6s;
}
#spinningSquaresG_8{
left:210px;
-moz-animation-delay:0.66s;
-webkit-animation-delay:0.66s;
-ms-animation-delay:0.66s;
-o-animation-delay:0.66s;
animation-delay:0.66s;
}
@-moz-keyframes bounce_spinningSquaresG{
0%{
-moz-transform:scale(1);
background-color:#FFDD00;
}
100%{
-moz-transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}
@-webkit-keyframes bounce_spinningSquaresG{
0%{
-webkit-transform:scale(1);
background-color:#FFDD00;
}
100%{
-webkit-transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}
@-ms-keyframes bounce_spinningSquaresG{
0%{
-ms-transform:scale(1);
background-color:#FFDD00;
}
100%{
-ms-transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}
@-o-keyframes bounce_spinningSquaresG{
0%{
-o-transform:scale(1);
background-color:#FFDD00;
}
100%{
-o-transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}
@keyframes bounce_spinningSquaresG{
0%{
transform:scale(1);
background-color:#FFDD00;
}
100%{
transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}

<!-- Start Andi-Techno.blogspot.com Loader -->
<script type='text/javascript'>
//<![CDATA[
$(function() {
    setTimeout(function() {
        $('#xgenloader-screen').fadeOut();
    }, 5000);
});
//]]>
</script>
<div id='xgenloader-screen'><div id="spinningSquaresG">
<div id="spinningSquaresG_1" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_2" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_3" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_4" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_5" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_6" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_7" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_8" class="spinningSquaresG">
</div>
</div>
</div>
<!-- End Loader -->

Klik Pratinjau, kalau loading muncul silahkan simpan template

Oke akhirnya selesai juga Tutorial Cara Membuat Animasi Loading Blog CSS3 dengan 6 Variasi Loader ini, jika ada kesalahan dalam mengetik saya mohon maaf karena saya sudah ngantuk sekali ini :(

oh iya kamu juga bisa menggunakan style Animated Loader yang lain lho, cara bikin animasi nya kamu pergi aja ke situs http://cssload.net/ disana kamu bisa berkreasi membuat animasi loading yang kamu sukai

oh iya satu lagi, kalau artikel ini bermanfaat, join blog ini ya (tombolnya ada di bawah) :)

Kalau ada yang belum jelas tulis aja di komentar

Sumber