Cara Membuat Progress Bar di Bootstrap, Ada 6 Jenis, Pilih yang Mana ?

1

Bootstrap menyediakan elemen yang dapat menampilkan sebuah Progress Bar dalam berbagai macam jenis, mulai dari basic hingga beranimasi. Progress Bar atau Batang Proses ini umumnya digunakan pada beberapa situs web yang memiliki suatu proses, baik itu proses download, upload, kelengkapan suatu tindakan (seperti: formulir, wizard), dan banyak lagi.

Ada 6 macam Progress Bars Bootstrap yang dapat kamu manfaatkan untuk mempercantik situs web / blog.

Basic Progress Bar

ads by posciety

Pertama, harus tau dulu dasar dari progress bar agar mudah memahami progress bar yang lain. Ini adalah contoh dari progress bar dasar:

gambar 1 - basic progress bar bootstrap

Untuk membuat basic progress bar seperti di atas, cukup copy paste kode di bawah ini:

<h2>Basic Progress Bar Bootstrap - Posciety</h2>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width:65%">
    <span class="sr-only">Proses 70%</span>
  </div>
</div>

Pada dasarnya, progress bar Bootstrap memerlukan div class progress bar dan class progress-bar (termasuk elemen-elemen di dalamnya) seperti yang terlihat pada struktur kode di atas.

Untuk mengatur jumlah proses (berwarna biru) dapat disesuaikan di bagian aria-valuenow dan style=”width:”, pastikan untuk mengatur aria-valuemin di angka 0 (nol) dan aria-valuemax di angka 100. Artinya angka minimal proses mulai dari 0 sampai 100. Ketika memasukkan nilai angka 50 di aria-valuenow dan style=:width:” maka akan menampilkan proses 50%.

Progress Bar Berwarna

Defaultnya warna progress bar ini dihiasi warna abu-abu sebagai dasar dan warna biru sebagai warna proses, kamu dapat menyesuaikan warna dengan cepat menggunakan contextual classes yang tersedia di Bootstrap.

<h2>Progress Bar Bootstrap Berwarna - Posciety</h2>
  <div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%">
      <span class="sr-only">Proses 30%</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width:10%">
      <span class="sr-only">Proses 10%</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width:90%">
      <span class="sr-only">Proses 90%</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%">
      <span class="sr-only">Proses 100%</span>
    </div>
  </div>

Perhatikan pada class progress-bar, jika ingin menggunakan warna contextual classes tinggal ditambahkan saja di akhirnya maka menjadi progress-bar-danger. Dari kodingan di atas, hasilnya akan terlihat seperti ini:

gambar 2 - contoh progress bar bootstrap berwarna

Progress bar berwarna merah (danger) menunjukkan proses 30%, progress bar berwarna biru (primary) menunjukkan proses 10%, progress bar berwarna oranye (warning) menunjukkan proses 90%, dan progress bar berwarna hijau (success) menunjukkan proses 100%.

Striped Progress Bar

Striped progress bar tidak berbeda jauh, ini tetap progress bar tapi ditambahkan desain garis pada batang prosesnya. Contoh:

gambar 3 - contoh progress bar desain bergaris bootstrap

Untuk menampilkan progress bar bergaris seperti ini cukup tambahkan class progress-bar-striped, contoh:

<h2>Striped Progress Bar Bootstrap - Posciety</h2>
  <div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100" style="width:67%">
      <span class="sr-only">Proses 67%</span>
    </div>
  </div>

Simpan dan lihat hasilnya !

Progress Bar + Teks

Contoh-contoh progress bars di atas terlihat polos tanpa ada tulisan di tengah batangnya, biasanya lebih baik menampilkan sebuah text atau hanya angka yang mewakili jarak tempuh proses. Misalnya menampilkan angka 70%, atau tulisan sedang diunggah…

Untuk menampilkan tulisan di tengah progress bar cukup menghapus <span class="sr-only"> </span> yang berada di tengah-tengah div, hapus dan gantikan dengan text biasa. Contoh:

<h2>Progress Bar Bootstrap dengan Text - Posciety</h2>
  <div class="progress">
    <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100" style="width:67%">
      67%
    </div>
  </div>
   <div class="progress">
    <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="89" aria-valuemin="0" aria-valuemax="100" style="width:89%">
      Tunggu Sebentar Lagi...
    </div>
  </div>

Code di atas akan menghasilkan progress bar seperti ini:

gambar 4 - progress bar bootstrap menampilkan teks

Terlihat angka dan teks di dalam proses bar, kamu dapat memasukkan teks apapun disini.

Progress Bars Digabung

Contoh progress bard di atas hanya menampilkan progress bar satu baris satu proses, jika ingin menampilkan progress bar yang menumpuk (digabung) dalam satu batang bisa gunakan kodingan berikut:

<h2>Progress Bars Bootstrap Digabung - Posciety</h2>
  <div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" style="width:10%">
      DISK C
    </div>
    <div class="progress-bar progress-bar-warning" role="progressbar" style="width:30%">
      DISK D
    </div>
    <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
      DISK Tidak Terpakai
    </div>
  </div>

Kamu tidak perlu menentukan aria-valuemin dan aria-valuemax, ini sudah diwakilkan dengan style=width:”, jangan lupa untuk menggabungkan semua progress-bar ke dalam satu class progress seperti yang terlihat pada code di atas. Maka hasilnya akan tampil seperti ini:

gambar 5 - contoh progress bar bootstrap ditumpuk jadi satu

Kombinasikan huruf, angka, warna, polos / bergaris seperti yang dijelaskan pada contoh-contoh sebelumnya.

Progress Bar dengan Animasi

Sebetulnya cukup tambahkan class active di dalam progress bar, maka progress bar akan bergerak / hidup sehingga terlihat beranimasi. Contoh:

<h2>Progress Bar Bootstrap Beranimasi - Posciety</h2>
  <div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="83" aria-valuemin="0" aria-valuemax="100" style="width:83%">
      Garisnya Bergerak (hidup)
    </div>
  </div>

Pastikan untuk menggunakan striped progress bar agar terlihat bergerak.

gambar 6 - progress bar bootstrap bergerak animasi

Ini hanya gambar, tidak akan terlihat begerak. Simpan kodingan di atas dan lihat hasilnya di situs Bootstrap yang kamu kelola.

Progress Bars Bootstrap ini bisa kamu gunakan untuk keperluan apapun dengan tujuan agar pengguna bisa mengetahui bahwa ada sebuah proses yang berjalan dan sejauh mana prosesnya sejauh ini.

Artikel Lainnya
Lihat Komentar (1)

Website ini menggunakan cookie untuk pengalaman yang lebih baik Setuju & Tutup Selengkapnya