Membuat loading dengan css3
faepopae
05.03
0
Hay brother, bagaimana aktivitas ngeblognya, wah semoga makin bersemangat aje yeh.. hihi. dan ane yakin banget nih, kalo blog sobat tampilannya cantik, pasti dah tiap hari maunya posting2 aje, hihi, gak kaya blog ane, jelek bro. wkwkwk
oke deh bro, kali ini ane mau share bagaimana membuat evek loading (seperti pada demo diatas )hanya dengan menggunakan css3, wah keren pastinya, apalagi css3 kan lebih gampang (keliatannye si :D :D ) okelah, jangan banyak bacot, kita mulei aje yeh :D :D dan jika sobat blogger mau praktek langsung, sobat bisa klik disini
1. Masukan markup ini dibagian html, inget HTML yah, kalo belom tau, kode html itu diletakan dibagian tag <body> sampai </body>, dan sobat bisa letakan dibawah tag <body>, tapi bisa juga, malah sangat bisa markup ini sobat letakan di tataletak>add gadget> html/java script. :D :D
<ul id="progress">
<li>
<div id="layer1" class="ball"></div>
<div id="layer7" class="pulse"></div>
</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>
2. Masukan script css dibawah ini di atas kode ]]>bskin (yah pookoke yang mirip karo kode kuen lah) ane hihihihi.
Nah, kalo udah, savedeh, lalu liat hasilnya.. Dan hal yang musti di inget nih yeh, ini script cuma iseng aje, ya kalo sobat mau dipasang silahkan, tapi ane sih pengennye buat kayak ginian cuma buat belajar aje.. :D :D :D
Dan yang ini full scriptnya :
And kalo yang terakhir enni nih,.. sobat bisa copy scripnye ni..
Dan sekarang, ane yakin sobat blogger "pemula" pasti bisa ngebadain dari sript diatas, mana yang css mana yang bukan :D :D :D 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; }
.ball {
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 {
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;}
}
Nah, kalo udah, savedeh, lalu liat hasilnya.. Dan hal yang musti di inget nih yeh, ini script cuma iseng aje, ya kalo sobat mau dipasang silahkan, tapi ane sih pengennye buat kayak ginian cuma buat belajar aje.. :D :D :D
Dan yang ini full scriptnya :
<!DOCTYPE html>
<html>
<head>
<style>
#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%;}
}
</style>
</head>
<body>
<div id="content">
<span class="expand"></span>
</div>
</body>
</html>
Nah...untuk script yang warna item adalah komponen HTML lengkap, dan yang warna merah adalah script CSS3, kemudian yang warna kuning, itu Merupakan markup dasar htmlnye :D :D :D<html>
<head>
<style>
#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%;}
}
</style>
</head>
<body>
<div id="content">
<span class="expand"></span>
</div>
</body>
</html>
And kalo yang terakhir enni nih,.. sobat bisa copy scripnye ni..
<!DOCTYPE html>
<html>
<head>
<style>
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; }
}
</style>
</head>
<body>
<ul id="loadbar">
<li>
<div id="layerFill1" class="bar"></div>
</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>
</body>
</html>
<html>
<head>
<style>
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; }
}
</style>
</head>
<body>
<ul id="loadbar">
<li>
<div id="layerFill1" class="bar"></div>
</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>
</body>
</html>
#salam share :)
Tidak ada komentar