Bootstrap - Baris Progres: Panduan Lengkap untuk Pemula

Hai sana, calon pengembang web! Hari ini, kita akan melihat dunia yang menakjubkan dari baris progres Bootstrap. Sebagai guru komputer tetangga yang ramah, saya disini untuk membimbing Anda dalam perjalanan menarik ini. Jadi, ambil secangkir kopi (atau teh, jika itu yang Anda sukai), dan mari kita mulai!

Apa Itu Baris Progres?

Sebelum kita masuk ke dalam kode, mari bicarakan apa itu baris progres dan mengapa itu penting. Bayangkan Anda mendownload file besar, dan Anda tak tahu berapa lama itu akan berlangsung. Frustrasi, kan? Itu tempat baris progres berada! Mereka adalah indikator visual yang menunjukkan seberapa jauh suatu proses telah berlangsung, memberikan pengguna rasa seberapa lama mereka masih harus menunggu.

Dalam dunia desain web, baris progres sangat berguna untuk:

• Menampilkan status pemuatan
• Menunjukkan penyelesaian formulir multi-langkah
• Menandai level keterampilan atau penilaian
• Dan banyak lagi!

Sekarang, mari kita lengan kanan dan mulai mengoding!

Baris Progres Dasar

Mari kita mulai dengan bentuk paling sederhana dari baris progres di Bootstrap. Ini adalah penampilannya:

<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

apa yang terjadi di sini? Mari kitauraikan:

1. Kita memiliki <div> luar dengan kelas progress. Ini membuat wadah untuk baris progres kita.
2. Didalamnya, kita memiliki <div> dengan kelas progress-bar. Ini adalah baris yang akan terisi.
3. Kita menetapkan width ke 25% menggunakan CSS inline. Ini menentukan seberapa penuh baris tampak.
4. Atribut aria-* adalah untuk aksesibilitas, membantu pembaca layar mengerti status baris.

Ukuran Baris

Sekarang, mari bicarakan ukuran baris progres. Bootstrap memberikan kita dua cara utama untuk mengendalikan ukuran: lebar dan tinggi.

Lebar

Lebar baris progres mewakili seberapa selesai proses itu. Kita dapat menetapkannya menggunakan persentase:

<div class="progress">
<div class="progress-bar" style="width: 0%"></div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 50%"></div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 75%"></div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 100%"></div>
</div>

Kode ini akan membuat lima baris progres, masing-masing terisi ke tingkat yang berbeda. Itu seperti mengisi lima gelas air ke tingkat yang berbeda!

Tinggi

Secara default, baris progres Bootstrap cukup ramping. Tetapi apa bila kita ingin baris yang lebih tebal? Kita dapat mengatur tingginya:

<div class="progress" style="height: 1px;">
<div class="progress-bar" style="width: 50%;"></div>
</div>
<div class="progress" style="height: 20px;">
<div class="progress-bar" style="width: 50%;"></div>
</div>

Di sini, kita membuat dua baris progres: satu sangat ramping (1px) dan satu yang sangat tebal (20px). Itu seperti membandingkan sepotong mie dengan potong kue tebal!

Label

kadang-kadang, menambahkan teks di dalam baris progres itu membantu. Ini adalah cara kita melakukannya:

<div class="progress">
<div class="progress-bar" style="width: 25%;">25%</div>
</div>

Simple, kan? Hanya tambahkan teks di dalam div progress-bar. Itu seperti menulis di atas baris itu sendiri!

Latar Belakang

Ingin membuat baris progres Anda lebih berwarna? Bootstrap menawarkan beberapa kelas warna yang sudah ditentukan:

<div class="progress">
<div class="progress-bar bg-success" style="width: 25%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-info" style="width: 50%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" style="width: 75%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" style="width: 100%"></div>
</div>

Kelas ini (bg-success, bg-info, bg-warning, bg-danger) memberikan kita baris hijau, biru, kuning, dan merah masing-masing. Itu seperti memiliki彩虹 kecil dari baris progres!

Baris Ganda

kadang-kadang, satu baris saja tidak cukup. Mungkin Anda ingin menunjukkan progres di berbagai kategori semua dalam satu baris. Bootstrap memungkinkan kita menumpuk baris progres:

<div class="progress">
<div class="progress-bar" style="width: 15%">15%</div>
<div class="progress-bar bg-success" style="width: 30%">30%</div>
<div class="progress-bar bg-info" style="width: 20%">20%</div>
</div>

Ini membuat satu baris progres dengan tiga segmen, masing-masing berwarna dan lebar yang berbeda. Itu seperti sandwich berwarna dari progres!

Baris Bertebak-tebakan

Ingin menambahkan sedikit keanggunan ke baris progres Anda? Cobalah menambahkan tebakan-tebakan:

<div class="progress">
<div class="progress-bar progress-bar-striped" style="width: 40%"></div>
</div>

Kelas progress-bar-striped menambahkan tebakan-tebakan diagonal ke baris kita. Itu seperti baris progres Anda memakai jaket pinstriped!

Tebakan Bergerak

Tapi mengapa berhenti di tebakan statis saat kita dapat membuatnya bergerak? Lihat ini:

<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%"></div>
</div>

Menambahkan kelas progress-bar-animated membuat tebakan-tebakan bergerak dari kanan ke kiri. Itu seperti baris progres Anda sedang melakukan tari!

Menggabungkan Semua

Sekarang kita telah belajar semua fitur ini, mari gabungkan mereka ke dalam satu baris progres super:

<div class="progress" style="height: 30px;">
<div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width: 40%">40% Complete</div>
</div>

Ini membuat baris progres tinggi, hijau, bertebakan, dan bergerak yang 40% penuh dengan label. Itu seperti pisau Swiss dari baris progres!

Kesimpulan

Dan di sana Anda punya nya, teman-teman! Anda sekarang ahli baris progres Bootstrap. Ingat, baris progres ini lebih daripada hanya visual yang indah - mereka adalah cara untuk berkomunikasi dengan pengguna Anda, membuat mereka informasi dan terlibat.

Sekarang Anda terus melanjutkan perjalanan coding Anda, jangan lupa untuk mencoba dan bersenang-senang. Mungkin Anda akan membuat baris progres yang terisi saat Anda gulir ke bawah halaman, atau satu yang menunjukkan seberapa dekat Anda mencapai skor tinggi dalam permainan Anda. Kemungkinan adalah tak terbatas!

Terus coding, terus belajar, dan terutama, terus maju. Sampai berjumpa lagi, ini adalah guru komputer tetangga Anda yang menutup!

Metode	Deskripsi
Baris Progres Dasar	Membuat baris progres sederhana
Ukuran Baris (Lebar)	Mengendalikan kepenuhan baris
Ukuran Baris (Tinggi)	Mengatur ketebalan baris
Label	Menambahkan teks di dalam baris progres
Latar Belakang	Mengubah warna baris progres
Baris Ganda	Menumpuk baris progres
Baris Bertebak-tebakan	Menambahkan tebakan-tebakan ke baris
Tebakan Bergerak	Membuat tebakan-tebakan bergerak

Credits: Image by storyset