CSS3 Chart dengan Animasi
CSS3 memungkinkan kita membuat chart dengan animasi di mana bar chart tersebut dapat bergerak dari 0% sampai panjang nilai barnya, misalnya 58%.
CSS3 juga memungkinkan kita memberikan warna gradasi tanpa menggunakan file gambar, sehingga lebih efektif dan efisien.
Begitu juga properti border-radius yang membuat tiap sudut kanan dari bar tersebut dapat melengkung (rounded corder).
Untuk membuat chat tersebut, pertama Anda buat coding HTML sebagai berikut.
<body> <h2>Web Browser Statistic Jan 2014</h2> <div class="record"> <span class="bar_value">58%</span> <div style="width:58%"> <div class="anim"> <span class="bar_name">Chrome</span> </div> </div> </div> <div class="record"> <span class="bar_value">27%</span> <div style="width:27%"> <div class="anim"> <span class="bar_name">Firefox</span> </div> </div> </div> <div class="record"> <span class="bar_value">9%</span> <div style="width:9%"> <div class="anim"> <span class="bar_name">IE</span> </div> </div> </div> <div class="record"> <span class="bar_value">4%</span> <div style="width:4%"> <div class="anim"> <span class="bar_name">Safari</span> </div> </div> </div> <div class="record"> <span class="bar_value">2%</span> <div style="width:2%"> <div class="anim"> <span class="bar_name">Opera</span> </div> </div> </div> </body>
Kemudian Anda tambahkan coding CSS sebagai berikut.
div.record{font: bold 12px Arial;
float: left; width: 100%;
border: 1px solid #ccc;
background-color: #e0e0e0;
margin-bottom: 2px;
}
div.anim { width:100%; height:30px;
border-radius: 0px 5px 5px 0px;
position:relative;
background: linear-gradient(to top, #ff9999 0%,#E03D3D 24%,#ff0000 50%,#E03D3D 79%,#ff9999 100%);
animation:myfirst 1s linear 0.1s ;
}
@keyframes myfirst
{from {width:0px;} to {width:100%;}}
span.bar_name
{ color: #ffffff; float: left;
margin: 7px 0 0 5px;
}
span.bar_value
{ color: #6D8591; float: right;
margin: 7px 0 0 5px;
}
Selamat mencoba. Semoga sukses.