Bootstrap adalah salah satu framework front-end yang populer digunakan oleh banyak pengembang web untuk membangun tampilan situs web yang menarik dan responsif. Salah satu fitur yang terdapat pada Bootstrap adalah progress bar atau bar kemajuan yang dapat membantu menampilkan status proses yang sedang berlangsung pada situs web Anda. Pada artikel ini, kita akan membahas cara membuat progress bar menggunakan Bootstrap.


Membuat Progress Bar Menggunakan Bootstrap Berikut adalah langkah-langkah untuk membuat progress bar menggunakan Bootstrap:

  1. Menambahkan Kode Bootstrap Untuk membuat progress bar dengan Bootstrap, langkah pertama adalah memasukkan kode Bootstrap ke dalam halaman web Anda. Anda dapat mengambil kode Bootstrap dari situs resminya, kemudian menyimpannya di folder proyek Anda.
php
<link rel="stylesheet" href="path/to/bootstrap/css/bootstrap.min.css">
<script src="path/to/bootstrap/js/bootstrap.min.js"></script>
  1. Menambahkan Kode HTML Setelah memasukkan kode Bootstrap, langkah berikutnya adalah menambahkan kode HTML untuk progress bar. Berikut adalah contoh kode HTML untuk membuat progress bar sederhana:
php
<div class="progress"> 
    <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> 
</div>

Dalam kode tersebut, kita menggunakan elemen div dengan kelas progress dan elemen div lagi dengan kelas progress-bar. Kita juga menambahkan beberapa atribut seperti role, style, aria-valuenow, aria-valuemin, dan aria-valuemax.

  1. Menambahkan Gaya CSS Untuk membuat tampilan progress bar lebih menarik, Anda dapat menambahkan gaya CSS ke dalam kode HTML Anda. Berikut adalah contoh kode CSS untuk membuat progress bar berwarna hijau dan menampilkan animasi saat berubah:
css
.progress-bar {
    background-color: #28a745;
    animation: progress-bar-stripes 2s linear infinite;
}

@keyframes progress-bar-stripes {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: 40px;
    }
}

Dalam kode CSS tersebut, kita mengatur warna latar belakang progress bar menjadi hijau dengan menggunakan background-color. Kemudian, kita menambahkan animasi ke dalam progress bar dengan menggunakan animation dan @keyframes.

  1. Mengatur Nilai Progress Bar Anda dapat mengatur nilai progress bar dengan mengubah atribut style pada elemen div dengan kelas progress-bar. Berikut adalah contoh kode untuk membuat progress bar dengan nilai 50%:
php
<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Kesimpulan Membuat progress bar dengan Bootstrap sangat mudah dan cepat. Dalam artikel ini, kita telah membahas langkah-langkah untuk membuat progress bar menggunakan Bootstrap. Dengan memahami cara membuat progress bar, Anda dapat menampilkan status proses yang sedang berlangsung pada situs web Anda dengan lebih baik dan menarik perhatian pengguna.