Cara membuat progress bar di html css

Question

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.

Table of Contents Show

Basic Progress Bar
Progress Bar Width
Progress Bar Colors
Progress Bar Labels
Progress Bar Text Size
Progress Bar Padding
Rounded Progress Bars
Dynamic Progress Bar
Dynamic Progress Bar with Labels
Cara Membuat Skills Progress Bar HTML Dan CSS

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 :

Preview Tampilan

demo dan full kode : https://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!!.

kode html