Cara Membuat Skill Bar dengan CSS3 - Style #2 - Kurazone Blog | Panduan Belajar Blogger Pemula

Cara Membuat Skill Bar dengan CSS3 - Style #2

Pilihan Editor :

Cara Membuat Skill Bar dengan CSS3 - Style #2
Penulis Bagus Surochman
0
Modus malam




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
20
Primary
54
Secondary
75
Danger
25
Warning
40
Success
85
Info
80
Dark
67
Gradasi
87

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 : 
  1. Penempatan kode CSS bisa diterapkan didalam Template, lebih tepatnya diatas kode ]]></b:skin>.
  2. 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>
  3. Sedangkan untuk penempatan kode HTML diletakkan didalam artikel dengan mode HTML (bukan compose).
  4. 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.
  5. Bagian bg-primary bisa kalian ubah sesuai nama selektor yang telah dicontohkan diatas, seperti success, info, dark, gradasi dan sebagainya.
  6. Sisanya bisa kalian explore.

Itulah informasi mengenai "Cara Membuat Skill Bar dengan CSS3 - Style #2", selamat mencoba dan semoga bermanfaat.

nanio
Cara Membuat Skill Bar dengan CSS3 - Style #2
Cara Membuat Skill Bar dengan CSS3 - Style #2 Cara Membuat Skill Bar dengan CSS3 - Style #2 Reviewed by Bagus Surochman on 9/22/2018

Tidak ada komentar:

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.