KURAZONE ~ Cara Membuat Skill Bar dengan CSS3 - Style #2, seperti yang kita ketahui bahwa pembuatan skill bar ini biasanya dipakai untuk memberikan statistik atau review pada suatu produk, kinerja perangkat, rating dan sebagainya. Dikarenakan pembuatan Skill Bar ini menggunakan CSS3 maka akan ada beberapa style yang nantinya akan saya publikasi ulang dengan style yang berbeda. Nah, pada kesempatan kali ini saya akan membahas untuk style yang kedua.
Hasil dari style pertama ini akan nampak seperti Skill Bar dibawah ini :
| Default | |
| Primary | |
| Secondary | |
| Danger | |
| Warning | |
| Success | |
| Info | |
| Dark | |
| Gradasi |
Pada umumnya, skill bar dirancang menggunakan javascript untuk memunculkan animasi pada progress skill bar, namun dalam skill bar kali ini kita tidak menggunakan javascript tersebut, yang kita perlukan hanyalah kombinasi dari HTML dan CSS saja. Sehingga kehadiran Skill Bar semacam ini tidak memberikan dampak yang besar pada kecepatan halaman blog. Nah, tertarik ingin membuat Skill Bar style pertama ini? Berikut adalah kode - kode dalam pembuatan Skill Bar Style 2 :
.jarak{padding:0px 10px}
.progress{display:-ms-flexbox;display:flex;height:1rem;overflow:hidden;font-size:.75rem;background-color:#e9ecef;border-radius:.25rem;}
.progress-bar{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:#fff;background-color:#123456;}
.bg-primary{background-color:#007bfd!important}
.bg-primary:focus,.bg-primary:hover{background-color:#0062cc!important}
.bg-secondary{background-color:#868e96!important}
.bg-secondary:focus,.bg-secondary:hover{background-color:#6c757d!important}
.bg-danger{background-color:#dc3545!important;}
.bg-danger:focus,.bg-danger:hover{background-color:#bd2130!important;}
.bg-warning{background-color:#ffc107!important;}
.bg-warning:focus,.bg-warning:hover{background-color:#d39e00!important;}
.bg-success{background-color:#28a745!important;}
.bg-success:focus,.bg-success:hover{background-color:#1e7e34!important;}
.bg-info{background-color:#17a2b8!important;}
.bg-info:focus,.bg-info:hover{background-color:#117a8b!important;}
.bg-dark{background-color:#343a40!important;}
.bg-dark:focus,.bg-dark:hover{background-color:#1d2124!important;}
.bg-gradasi{background:linear-gradient(to left,green,orange) !important;}
.bg-gradasi:focus,.bg-gradasi:hover{background:linear-gradient(to right,green,orange) !important;}<table><tbody>
<tr><td class="jarak"><b>Default</b></td><td style="width: 80%;"><div class="progress">
<div class="progress-bar" style="width: 20%;">20</div></div>
</td></tr>
<tr><td class="jarak"><b>Primary</b></td><td style="width: 70%;"><div class="progress">
<div class="progress-bar bg-primary" style="width: 54%;">54</div></div>
</td></tr>
<tr><td class="jarak"><b>Secondary</b></td><td style="width: 70%;"><div class="progress">
<div class="progress-bar bg-secondary" style="width: 75%;">75</div></div>
</td></tr>
<tr><td class="jarak"><b>Danger</b></td><td style="width: 70%;"><div class="progress">
<div class="progress-bar bg-danger" style="width: 25%;">25</div></div>
</td></tr>
<tr><td class="jarak"><b>Warning</b></td><td style="width: 70%;"><div class="progress">
<div class="progress-bar bg-warning" style="width: 40%;">40</div></div>
</td></tr>
<tr><td class="jarak"><b>Success</b></td><td style="width: 70%;"><div class="progress">
<div class="progress-bar bg-success" style="width: 85%;">85</div></div>
</td></tr>
<tr><td class="jarak"><b>Info</b></td><td style="width: 70%;"><div class="progress">
<div class="progress-bar bg-info" style="width: 80%;">80</div></div>
</td></tr>
<tr><td class="jarak"><b>Dark</b></td><td style="width: 70%;"><div class="progress">
<div class="progress-bar bg-dark" style="width: 67%;">67</div></div>
</td></tr>
<tr><td class="jarak"><b>Gradasi</b></td><td style="width: 70%;"><div class="progress">
<div class="progress-bar bg-gradasi" style="width: 87%;">87</div></div>
</td></tr>
</tbody></table>Note :
- Penempatan kode CSS bisa diterapkan didalam Template, lebih tepatnya diatas kode ]]></b:skin>.
- Atau jika ingin meletakkan CSS didalam artikel maka ubah mode penulisannya ke mode HTML terlebih dahulu, lalu buatlah <style> dan </style>. Letakkan kode CSS nya diantara kode <style> dan </style>
- Sedangkan untuk penempatan kode HTML diletakkan didalam artikel dengan mode HTML (bukan compose).
- Perhatikan kode style="width: 87%;">87</div> yang ditandai oleh warna, kedua nominal ini haruslah sama supaya panjang skill bar dan angka yang diperlihatkan seimbang.
- Bagian bg-primary bisa kalian ubah sesuai nama selektor yang telah dicontohkan diatas, seperti success, info, dark, gradasi dan sebagainya.
- Sisanya bisa kalian explore.
Itulah informasi mengenai "Cara Membuat Skill Bar dengan CSS3 - Style #2", selamat mencoba dan semoga bermanfaat.
Tags
Skill Bar