Progress bar digunakan untuk menunjukkan proses yang sedang berjalan sperti loading. Kalian juga bisa memanfaatkan bentuk yang sama dengan progress bar untuk menunjukkan persentase hasil tes atau semacamnya.
Progress bar bisa dibuat dengan menggunakan tag progress. Selain itu, ada tag meter yang kegunaannya hampir sejenis. Kelemahan dari penggunaan tag HTML tanpa CSS adalah tampilannya relatif berbeda sesuai dengan browser yang digunakan. Jika kalian ingin tampilannya selalu sama, kalian bisa menggunakan CSS untuk memodifikasi tampilan elemen HTML yang sudah ada. Selain dengan memodifikasi elemen yang sudah ada, kalian bisa membuat custom progressbar dengan menggunakan CSS.
<HTML><HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
body *{
box-sizing:border-box;
}
.progress_bar{
background:white;
border: solid 1px red;
width:100px;
height:10px;
border-radius:5px;
overflow:hidden;
}
.progress{
background:red;
height:100%;
}
</style>
</HEAD>
<BODY>
<label>Progress bar :</label><BR>
<progress value="50" max="100" style="height:20px;width:100px">50 dari 100</progress><BR>
<label>Meter :</label><BR>
<meter value="80" min="10" low="20" high=80" max="100" style="height:20px;width:100px">80 dari 100</meter><BR>
<label>Persentase (custom div) :</label><BR>
<div class="progress_bar">
<div class="progress" style="width:50%">
</div>
</BODY>
</HTML>
Tag <progress> dan <meter> sama-sama memiliki atribut value dan max. Max digunakan untuk menentukan nilai maksimal berdasarkan hasil perhitungan aslinya. Value digunakan untuk menentukan nilai “saat ini”. Ukuran dari isi progress bar ataupun meter akan diperhitungkan berdasarkan nilai value dan max.
Atribut low dan high dalam tag <meter> seperti digunakan untuk menunjukkan batas nilai yang dianggap terlalu tinggi dan terlalu rendah. Dua atribut tersebut tidak diperlukan dalam tag progress.
Untuk membuat progress bar atau hasil yang menampilkan persentase dengan menggunakan CSS, kalian bisa menggunakan tag div yang berisi tag div lainnya. Tag div bagian luar digunakan untuk menampilkan border. Tag div bagian dalam bisa diberi panjang dengan persentase dan background sehingga bisa digunakan untuk menampilkan persentase proses atau hasil.
A progress bar can be used to show how far along a user is in a process:
Click Me
Basic Progress Bar
A normal
element can be used for a progress bar.
The CSS width property can be used to set the height and width of a progress bar.
Example
Try it Yourself »
Progress Bar Width
Change the width of a progress bar with the CSS width property (from 0 to 100%):
Example
Try it Yourself »
Progress Bar Colors
Use the w3-color classes to change the color of a progress bar:
Example
Try it Yourself »
Progress Bar Labels
Add text inside a w3-container element to add a label to the progress bar.
Use the w3-center class to center the label. If omitted, it will be left aligned.
Example
25%
Try it Yourself »
Progress Bar Text Size
Use the w3-size classes to change the text size in the container:
Example
50%
Try it Yourself »
Progress Bar Padding
Use the w3-padding classes to add padding to the container.
Example
25%
Try it Yourself »
Rounded Progress Bars
Use the w3-round classes to add rounded corners to a progress bar:
Example
25%
Try it Yourself »
Dynamic Progress Bar
Use JavaScript to create a dynamic progress bar:
Click Me
Example
Click Me
Try it Yourself »
Dynamic Progress Bar with Labels
Centered label:
Left-aligned label:
Label outside of the progress bar:
Another example (advanced):
Cara Membuat Tampilan Skills Progress Bar HTML Dan CSS – skills progress bar merupakan sebuah tampilan pada html yang nanti akan menunjukan keterampilan serta kemampuan yang kita miliki.
dan nantinya bisa di pakai di halaman portofolio atau resume kalian, nah gimana sih cara buatnya??, caranya gampang kok! kalian gk perlu koding ribet ribet.
karena disini saya akan share salah satu kodingan untuk tampilan skills progress bar menggunakan bahasa pemrograman dasar html dan css, yang sederhana.
Cara Membuat Skills Progress Bar HTML Dan CSS
langsung saja kita buat sebuah kodingan html dan css, secara sederhana.
Buat File Html
buat file yang di akhiri dengan ekstensi .html, salin dan paste kode di bawah ini.
dan hasilnya akan jadi seperti ini :
demo dan full kode : //github.com/sulistioxyz/skillswithprogressbar
Kesimpulan
kamu bisa mengedit skills barnya tergantung dengan skills kemampuan yang kamu punya atau juga bisa menambahkan skills bar lagi sesuai dengan kemampuan dan keterampilan yang kamu miliki.
setelah jadi kamu bisa tambahkan di portofolio page kamu jika belum mempunyai portofolio page kamu bisa lihat artikel cara membuat portofolio page sederhana di sini!!
demikianlah tutorial cara membuat tampilan skills dengan bahasa pemrograman html dan css semoga dapat bermanfaat!! jika mempunyai kendala dan pertanyaan silahkan komentar di bawah!!.