Cara Membuat Progress Bars pada Bootstrap – Dalam Bootstrap, ada yang namanya Progress Bar, apa itu? Progress bar ini dapat digunakan untuk informasi tentang seberapa jauh kemajuan user dalam melakukan suatu hal.
Cara Membuat Progress Bars pada Bootstrap
Lalu bagaimana kita membuat Progress Bars pada Bootstrap? Dalam Bootstrap, ada beberapa class yang bisa kita gunakan untuk membuat Progress Bars. Cukup tambahkan class kedalam
<div>. Bagaimana caranya? Tambahkan .progress ke dalam container dan .progress-bar di dalamnya. Lihat contoh berikut,- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>Progress Bar | codelatte.org</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="css/bootstrap.min.css">
- <script src="js/jquery.min.js"></script>
- <script src="js/popper.min.js"></script>
- <script src="js/bootstrap.min.js"></script>
- </head>
- <body>
- <div class="container">
- <h2>Progress Bar | codelatte.org</h2>
- <p>Untuk membuat default progress bar, tambahkan <code>.progress</code> ke dalam elemen container lalu tambahkan <code>.progress-bar</code>. Kalian bisa gunakan <code>width</code> untuk mengatur lebar dari progress bar tersebut</p>
- <div class="progress">
- <div class="progress-bar" style="width:70%"></div>
- </div>
- </div>
- </body>
- </html>
Hasilnya akan menjadi seperti ini,
Memberi Label pada Progress Bars
Kita juga bisa memberi label di dalam progress bars, cukup rubah atau tambahkan sehingga menjadi seperti ini,
- <div class="progress">
- <div class="progress-bar" style="width:70%">70%</div>
- </div>
Progress Bars Berwarna
Secara default, progress bars pada Bootstrap akan berwarna biru (primary). Namun kita bisa juga memberi warna pada progress bars tersebut. Lihat kode berikut,
- <!-- Blue -->
- <div class="progress">
- <div class="progress-bar" style="width:10%"></div>
- </div>
- <!-- Green -->
- <div class="progress">
- <div class="progress-bar bg-success" style="width:20%"></div>
- </div>
- <!-- Turquoise -->
- <div class="progress">
- <div class="progress-bar bg-info" style="width:30%"></div>
- </div>
- <!-- Orange -->
- <div class="progress">
- <div class="progress-bar bg-warning" style="width:40%"></div>
- </div>
- <!-- Red -->
- <div class="progress">
- <div class="progress-bar bg-danger" style="width:50%"></div>
- </div>
- <!-- White -->
- <div class="progress border">
- <div class="progress-bar bg-white" style="width:60%"></div>
- </div>
- <!-- Grey -->
- <div class="progress">
- <div class="progress-bar bg-secondary" style="width:70%"></div>
- </div>
- <!-- Light Grey -->
- <div class="progress border">
- <div class="progress-bar bg-light" style="width:80%"></div>
- </div>
- <!-- Dark Grey -->
- <div class="progress">
- <div class="progress-bar bg-dark" style="width:90%"></div>
- </div>
Animasi Progress Bars
Tambahkan
.progress-bar-animated untuk membuat animasi progress bars. Contohnya seperti ini,- <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 40%"></div>
Multiple Progress Bars
Kita juga bisa memisah progress bars menjadi beberapa bagian.
- <div class="progress">
- <div class="progress-bar bg-success" style="width:40%">
- Hijau
- </div>
- <div class="progress-bar bg-warning" style="width:10%">
- Kuning
- </div>
- <div class="progress-bar bg-danger" style="width:20%">
- Merah
- </div>
- </div>
Untuk demo nya bisa dilihat dibawah ini,
Sekian artikel tentang Cara Membuat Progress Bars pada Bootstrap. Jika ada yang ingin ditanyakan, silahkan tinggalkan pertanyaan di kolom komentar. Semoga bermanfaat dan sampai jumpa pada artikel berikutnya.
EmoticonEmoticon