Berikut ini class pada bootstrap yang digunakan untuk membuat progress bar adalah

Bab ini akan menjelaskan Bootstrap progress bar. Dalam tutorial ini, Anda akan melihat bagaimana untuk membuat progress bar memuat Bootstrap, mengarahkan, atau negara operasi.

Bootstrap progress bar menggunakan transisi CSS3 dan animasi untuk mendapatkan efek. versi lama dari Internet Explorer dan Firefox 9 dan sebelumnya tidak mendukung fitur ini, Opera 12 tidak mendukung animasi.

Kemajuan bar default

Buat progress bar dasar, ikuti langkah berikut:

• Tambahkan .progresskelas dengan

  .

• Kemudian, di atas

  di dalam, menambahkankelas .progress-bar dengan kosong

  .

• Menambahkan atribut gaya dengan lebar dinyatakan sebagai persentase, seperti style = "60%"; 60% merupakan lokasi progress bar.

Mari kita lihat contoh berikut:

contoh

40% selesai

Coba »

Hasilnya adalah sebagai berikut:

Alternatif progress bar

Untuk menciptakan gaya progress bar yang berbeda sebagai berikut:

• Tambahkan .progresskelas dengan

  .

• Kemudian, di atas

  di dalam, menambahkankelas .progress-bar dan kemajuan-bar-*kelas kosong dengan

  . Mana * bisasukses, info, peringatan, bahaya.

• Menambahkan atribut gaya dengan lebar dinyatakan sebagai persentase, seperti style = "60%"; 60% merupakan lokasi progress bar.

Mari kita lihat contoh berikut:

contoh

90% selesai (sukses)

30% lengkap (Informasi)

20% lengkap (peringatan)

10% lengkap (bahaya)

Coba »

Hasilnya adalah sebagai berikut:

Progress bar garis-garis

Buat progress bar stripe, ikuti langkah berikut:

• Menambahkan dengan .progresskelas dan .progress-bergaris

  .

• Kemudian, di atas

  di dalam, menambahkankelas .progress-bar dan kemajuan-bar-*kelas kosong dengan

  . Mana * bisasukses, info, peringatan, bahaya.

• Menambahkan atribut gaya dengan lebar dinyatakan sebagai persentase, seperti style = "60%"; 60% merupakan lokasi progress bar.

Mari kita lihat contoh berikut:

contoh

90% selesai (sukses)

30% lengkap (Informasi)

20% lengkap (peringatan)

10% lengkap (bahaya)

Coba »

Hasilnya adalah sebagai berikut:

Animasi progress bar

Buat progress bar animasi, ikuti langkah berikut:

• Menambahkan dengan .progresskelas dan .progress-bergaris

  . Sambil menambahkankelas .active.

• Kemudian, di atas

  di dalam, menambahkankelas .progress-bar dengan kosong

  .

• Menambahkan atribut gaya dengan lebar dinyatakan sebagai persentase, seperti style = "60%"; 60% merupakan lokasi progress bar.

Ini akan membuat garis-garis memiliki rasa gerakan dari kanan ke kiri.

Mari kita lihat contoh berikut:

contoh

40% selesai

Coba »

Hasilnya adalah sebagai berikut:

Ditumpuk progress bar

Anda bahkan dapat menumpuk beberapa progress bar. Beberapa kemajuan bar di tumpukan.progress yang sama dapat terwujud, seperti yang ditunjukkan dalam contoh berikut:

Hallo teman-teman apa kabar semuanya, mudah-mudahan baik semuanya ya, amin. Pada tutorial kali ini kita akan belajar bagaimana caranya membuat Progress Bar menggunakan Bootstrap. Progress Bar biasanya digunakan untuk memberitahu user bahwa ada suatu aksi yang sedang berlangsung atau berjalan. Didalam Bootstrap ada 4 tipe Progress Bar yaitu Default, Bergaris, Animasi, dan bertumpuk. Sebelum kita praktekan, saya ingin memberitahu bahwa Progress Bar ini tidak akan berjalan di Internet Explorer 9 dan versi dibawahnya, Firefox versi lama juga tidak mendukung untuk Progress Bar ini, dan Opera 12 juga termasuk. Baiklah langsung saja kita masuk ke Progress Bar yang pertama.

Progress Bar Default (Dasar) :

Jika kalian ingin membuat Tipe Progress Bar Default (dasar) kalian bisa membuat struktur HTML didalam Bootstrap seperti dibawah ini, dimana kalian bisa membuat elemen

dan tambahkan class .progress. kemudian didalamnya lagi kalian bisa buat elemen

dengan class .progress-bar. Maka hasilnya akan seperti gambar dibawah ini :

Progress Bar Bergaris :

Kemudian jika kalian ingin membuat tipe Progress Bar Bergaris kalian bisa membuat elemen

kemudian didalam elemen

tambahkan class .progress dan .progress-striped. Maka Hasilnya akan seperti dibawah ini :

Progress Bar Animasi :

Selanjutnya Jika kalian ingin membuat tipe  Progress Bar Animasi kalian bisa membuat elemen

kemudian didalam elemen

tambahkan class .progress, .progress-striped dan class .active. Contohnya seperti gambar dibawah ini :

Progress Bar Stacked (Bertumpuk) :

Dan yang terakhir, jika kalian ingin membuat tipe Progress Bar Stacked (bertumpuk), kalian bisa menggabungkan beberapa elemen

dengan class .progress, lalu didalamnya kalian bisa buat 3 elemen

dengan class .progress-bar. Contohnya seperti gambar dibawah ini :

Nah itulah beberapa Progress Bar yang terdapat pada Bootstrap, Progress Bar ini juga sudah didukung dengan tampilan Responsive, dimana kalian dapat membukanya ditampilan layar apapun.