Simple Progress Animasi CSS3

Simple Progress Animasi CSS3 - Untuk artikel kali ini saya akan memberikan contoh konsep sederhana penggunaan efek keyframe animasi warna css3, yang nantinya bisa kita gunakan untuk memodifikasi tampilan about me dengan skill bar ataupun widget blog lainnya. Cara seperti ini biasa kita jumpai pada portofolio template atau website desain template lainnya. Fungsi dari progress bar ini untuk menggambarkan tingkat pengetahuan admin yang berkaitan dengan web design baik itu css, html, javascript dan pengetahuan lainnya.

Sebagai contoh berikut ini :

DEMO

CSS

#progress { 
list-style: none;
font: 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  color: #222;
width: 296px;
margin: 50px auto 0;
position: relative;
line-height: 2em;
padding: 30px 0;
}

#progress li { 
margin-bottom:50px; 
background:#e9e5e2;
background-image: -webkit-gradient(linear, left top, left bottom, from(#e1ddd9), to(#e9e5e2));
background-image: -webkit-linear-gradient(top, #e1ddd9, #e9e5e2);
background-image: -moz-linear-gradient(top, #e1ddd9, #e9e5e2);
background-image: -ms-linear-gradient(top, #e1ddd9, #e9e5e2);
background-image: -o-linear-gradient(top, #e1ddd9, #e9e5e2);
background-image: linear-gradient(top, #e1ddd9, #e9e5e2);  
height:20px; 
border-radius:10px; 
-moz-box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;  
-webkit-box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;  
box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;  
}

#progress li h3 { 
position:relative; 
top:-25px;
}

.bar { 
height:18px; 
margin:1px 2px;  
position:absolute;
border-radius:10px;
-moz-box-shadow: 0 1px 0px #fcfcfc inset, 0 1px 0 #bebbb9;
-webkit-box-shadow: 0 1px 0px #fcfcfc inset, 0 1px 0 #bebbb9;  
box-shadow: 0 1px 0px #fcfcfc inset, 0 1px 0 #bebbb9;
}

.merah {
width:100%; 
-moz-animation:merah 2s ease-out;
-webkit-animation:merah 2s ease-out;
background-color: #f674a4;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f674a4), to(#e06995));
background-image: -webkit-linear-gradient(top, #f674a4, #e06995);
background-image: -moz-linear-gradient(top, #f674a4, #e06995);
background-image: -ms-linear-gradient(top, #f674a4, #e06995);
background-image: -o-linear-gradient(top, #f674a4, #e06995);
background-image: linear-gradient(top, #f674a4, #e06995);
}

.kuning {
width:90%;
-moz-animation:kuning 2s ease-out;
-webkit-animation:kuning 2s ease-out;
background-color: #f0bb4b;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f0bb4b), to(#d9aa44));
background-image: -webkit-linear-gradient(top, #f0bb4b, #d9aa44);
background-image: -moz-linear-gradient(top, #f0bb4b, #d9aa44);
background-image: -ms-linear-gradient(top, #f0bb4b, #d9aa44);
background-image: -o-linear-gradient(top, #f0bb4b, #d9aa44);
background-image: linear-gradient(top, #f0bb4b, #d9aa44);
}

.ijo {
width:65%;
-moz-animation:ijo 2s ease-out;
-webkit-animation:ijo 2s ease-out;
background-color: #a1ce5b;
background-image: -webkit-gradient(linear, left top, left bottom, from(#a1ce5b), to(#91ba52));
background-image: -webkit-linear-gradient(top, #a1ce5b, #91ba52);
background-image: -moz-linear-gradient(top, #a1ce5b, #91ba52);
background-image: -ms-linear-gradient(top, #a1ce5b, #91ba52);
background-image: -o-linear-gradient(top, #a1ce5b, #91ba52);
background-image: linear-gradient(top, #a1ce5b, #91ba52);
}

.biru {
width:80%;
-moz-animation:biru 2s ease-out;
-webkit-animation:biru 2s ease-out;
background-color: #66b3cc;
background-image: -webkit-gradient(linear, left top, left bottom, from(#66b3cc), to(#5da3ba));
background-image: -webkit-linear-gradient(top, #66b3cc, #5da3ba);
background-image: -moz-linear-gradient(top, #66b3cc, #5da3ba);
background-image: -ms-linear-gradient(top, #66b3cc, #5da3ba);
background-image: -o-linear-gradient(top, #66b3cc, #5da3ba);
background-image: linear-gradient(top, #66b3cc, #5da3ba)
}

@-moz-keyframes merah {0%  { width:0px;} 100%{ width:100%;}  }
@-moz-keyframes kuning        { 0%  { width:0px;} 100%{ width:90%;}  }
@-moz-keyframes ijo      { 0%  { width:0px;} 100%{ width:65%;}  }
@-moz-keyframes biru   { 0%  { width:0px;} 100%{ width:80%;}  }

@-webkit-keyframes merah       { 0%  { width:0px;} 100%{ width:100%;}  }
@-webkit-keyframes kuning        { 0%  { width:0px;} 100%{ width:90%;}  }
@-webkit-keyframes ijo     { 0%  { width:0px;} 100%{ width:65%;}  }
@-webkit-keyframes biru   { 0%  { width:0px;} 100%{ width:80%;}  }

HTML

<ul id="progress">
<li><span class="bar merah"></span><h3>Merah</h3></li>
<li><span class="bar kuning"></span><h3>Kuning</h3></li>
<li><span class="bar ijo"></span><h3>Ijo</h3></li>
<li><span class="bar biru"></span><h3>Biru</h3></li>
</ul>

Untuk mengubah ukuran sesuai prosentase ganti ukuran {width : ...%} sesuai class masing - masing