Tips Social Media Twitter Update :

First Example CSS3 Loading Animation

HTML

Dalam contoh pertama, markup sangat sederhana, dimana kita akan membuat daftar dan akan kita buat di dalam div untuk menciptakan efek tersebut dan untuk mengontrol animasi total.

<ul id="progress">
<li>
<div id="layer1" class="ball"></div> <!-- layer1 control delay animation / ball is effect -->
<div id="layer7" class="pulse"></div> <!-- layer7 control delay animation / pulse is effect -->
</li>
<li>
<div id="layer2" class="ball"></div>
<div id="layer8" class="pulse"></div>
</li>
<li>
<div id="layer3" class="ball"></div>
<div id="layer9" class="pulse"></div>
</li>
<li>
<div id="layer4" class="ball"></div>
<div id="layer10" class="pulse"></div>
</li>
<li>
<div id="layer5" class="ball"></div>
<div id="layer11" class="pulse"></div>
</li>
</ul>

CSS

Tidak sulit, hanya membuat grafis untuk daftar , berhati-hati untuk animasi, berkat lapisan penundaan dan kontrol kita dapat membuat efek ini!

ul#progress {
list-style:none;
width:125px;
margin:0 auto;
padding-top:50px;
padding-bottom:50px;
}

ul#progress li { /* Style your list */
float:left;
position:relative;
width:15px;
height:15px;
border:1px solid #fff;
border-radius:50px;
margin-left:10px;
border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333;
background:#000;
}

ul#progress li:first-child { margin-left:0; } /* Remove the margin first li element */

.ball { /* Style your ball and set the animation */
background-color:#2187e7;
background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff);
background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff);

width:15px;
height:15px;
border-radius:50px;
-moz-transform:scale(0);
-webkit-transform:scale(0);

-moz-animation:loading 1s linear forwards;
-webkit-animation:loading 1s linear forwards;
}

.pulse { /* Style your second ball to create the amazing effects */
width:15px;
height:15px;
border-radius:30px;
border: 1px solid #00c6ff;
box-shadow: 0 0 5px #00c6ff;
position:absolute;
top:-1px;
left:-1px;
-moz-transform:scale(0);
-webkit-transform:scale(0);

-webkit-animation:pulse 1s ease-out;
-moz-animation:pulse 1s ease-out;
}

/* Control Layers */
#layer1 { -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; }
#layer2 { -moz-animation-delay:1s; -webkit-animation-delay:1s; }
#layer3 { -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; }
#layer4 { -moz-animation-delay:2s; -webkit-animation-delay:2s; }
#layer5 { -moz-animation-delay:2.5s; -webkit-animation-delay:2.5s; }

#layer7 { -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; }
#layer8 { -moz-animation-delay:2s; -webkit-animation-delay:2s; }
#layer9 { -moz-animation-delay:2.5s; -webkit-animation-delay:2.5s; }
#layer10 { -moz-animation-delay:3s; -webkit-animation-delay:3s; }
#layer11 { -moz-animation-delay:3.5s; -webkit-animation-delay:3.5s; }

@-moz-keyframes loading {
0%{-moz-transform:scale(0,0);}
100%{-moz-transform:scale(1,1);}
}

@-webkit-keyframes loading {
0%{-webkit-transform:scale(0,0);}
100%{-webkit-transform:scale(1,1);}
}

@-moz-keyframes pulse {
0% {-moz-transform: scale(0);opacity: 0;}
10% {-moz-transform: scale(1);opacity: 0.5;}
50% {-moz-transform: scale(1.75);opacity: 0;}
100% {-moz-transform: scale(0);opacity: 0;}
}

@-webkit-keyframes pulse {
0% {-webkit-transform: scale(0);opacity: 0;}
10% {-webkit-transform: scale(1);opacity: 0.5;}
50% {-webkit-transform: scale(1.75);opacity: 0;}
100% {-webkit-transform: scale(0);opacity: 0;}
}

Second Example CSS3 Loading Animation

HTML

sama seperti di atas

<div id="content">
<span class="expand"></span>
</div>

CSS

sama seperti di atas

#content {
width:100%; /* Full Width */
height:5px;
margin:50px auto;
background:#000;
}

.expand {
width:100%;
height:1px;
margin:2px 0;
background:#2187e7;
position:absolute;
box-shadow:0px 0px 10px 1px rgba(0,198,255,0.7);
-moz-animation:fullexpand 10s ease-out;
-webkit-animation:fullexpand 10s ease-out;
}

/* Full Width Animation Bar */
@-moz-keyframes fullexpand {
0% { width:0px;}
100%{ width:100%;}
}

@-webkit-keyframes fullexpand {
0% { width:0px;}
100%{ width:100%;}
}

Third Example CSS3 Loading Animation

HTML

sama seperti di atas

<ul id="loadbar">
<li>
<div id="layerFill1" class="bar"></div> <!-- Control Layer + Bar -->
</li>
<li>
<div id="layerFill2" class="bar"></div>
</li>
<li>
<div id="layerFill3" class="bar"></div>
</li>
<li>
<div id="layerFill4" class="bar"></div>
</li>
<li>
<div id="layerFill5" class="bar"></div>
</li>
<li>
<div id="layerFill6" class="bar"></div>
</li>
<li>
<div id="layerFill7" class="bar"></div>
</li>
<li>
<div id="layerFill8" class="bar"></div>
</li>
<li>
<div id="layerFill9" class="bar"></div>
</li>
<li>
<div id="layerFill10" class="bar"></div>
</li>
</ul>

CSS

sama seperti di atas

ul#loadbar {
list-style:none;
width:140px;
margin:0 auto;
padding-top:50px;
padding-bottom:75px;
}
ul#loadbar li {
float:left;
position:relative;
width:11px;
height:26px;
margin-left:1px;
border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333;
background:#000;
}

ul#loadbar li:first-child { margin-left:0; }

.bar {
background-color:#2187e7;
background-image: -moz-linear-gradient(45deg, #2187e7 25%, #a0eaff);
background-image: -webkit-linear-gradient(45deg, #2187e7 25%, #a0eaff);
width:11px;
height:26px;
opacity:0;
-webkit-animation:fill .5s linear forwards;
-moz-animation:fill .5s linear forwards;
}

#layerFill1 { -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; }
#layerFill2 { -moz-animation-delay:1s; -webkit-animation-delay:1s; }
#layerFill3 { -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; }
#layerFill4 { -moz-animation-delay:2s; -webkit-animation-delay:2s; }
#layerFill5 { -moz-animation-delay:2.5s; -webkit-animation-delay:2.5s; }
#layerFill6 { -moz-animation-delay:3s; -webkit-animation-delay:3s; }
#layerFill7 { -moz-animation-delay:3.5s; -webkit-animation-delay:3.5s; }
#layerFill8 { -moz-animation-delay:4s; -webkit-animation-delay:4s; }
#layerFill9 { -moz-animation-delay:4.5s; -webkit-animation-delay:4.5s; }
#layerFill10 { -moz-animation-delay:5s; -webkit-animation-delay:5s; }

@-moz-keyframes fill {
0%{ opacity:0; }
100%{ opacity:1; }
}

@-webkit-keyframes fill {
0%{ opacity:0; }
100%{ opacity:1; }
}