Bootstrap Progress Bars

I.Latar Belakang.
Membuat suatu tampilan dengan Bootsrap.

II.Alat dan Bahan.
  Laptop / PC
  W3SCHOOLS
  Sublime Text

III.Tujuan.
Agar tampilan suatu program itu responsiv.

IV.Penjelasan.

Bootstrap Progress Bars

Basic Progress Bar
Sebuah progress bar dapat digunakan untuk menunjukkan kepada pengguna seberapa jauh dia berada dalam sebuah proses.
Bootstrap menyediakan beberapa jenis progress bar.
Untuk membuat bilah kemajuan default, tambahkan kelas .progress ke elemen <div>:
Contoh

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    <span class="sr-only">70% Complete</span>
  </div>
</div>

Catatan: Bar kemajuan tidak didukung di Internet Explorer 9 dan sebelumnya (karena mereka menggunakan transisi dan animasi CSS3 untuk mendapatkan beberapa efeknya).

Catatan: Untuk membantu meningkatkan aksesibilitas orang-orang yang menggunakan pembaca layar, Anda harus menyertakan atribut aria- *.
Progress Bar Dengan Label

Hapus kelas sr-only dari progress bar untuk menunjukkan persentase yang terlihat:
Contoh

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

Bar kemajuan berwarna
Kelas kontekstual digunakan untuk memberi "makna melalui warna".

Kelas kontekstual yang dapat digunakan dengan progress bar adalah:

    .progress-bar-success
    .progress-bar-info
    .progress-bar-warning
    .progress-bar-danger

Contoh berikut menunjukkan bagaimana membuat progress bar dengan kelas kontekstual yang berbeda:
Contoh

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
  aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% Complete (success)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
  aria-valuemin="0" aria-valuemax="100" style="width:50%">
    50% Complete (info)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
  aria-valuemin="0" aria-valuemax="100" style="width:60%">
    60% Complete (warning)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70% Complete (danger)
  </div>
</div>

Bar Kemajuan Striped
Tambahkan kelas .progress-bar-striped untuk menambahkan garis ke progress bar:
Contoh

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
  aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% Complete (success)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"
  aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
    50% Complete (info)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar"
  aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
    60% Complete (warning)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar"
  aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70% Complete (danger)
  </div>
</div>
Bar Perkembangan Animasi
Tambahkan kelas .aktif untuk menghidupkan bilah kemajuan:
Contoh

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

Stacked Progress Bar
Batang kemajuan juga dapat ditumpuk:
Ruang bebas
PERINGATAN
Bahaya

Buat bilah kemajuan bertumpuk dengan menempatkan beberapa batang ke <div class = "progress"> yang sama:
Contoh

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
    Free Space
  </div>
  <div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
    Warning
  </div>
  <div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
    Danger
  </div>
</div>

Contoh :

Maka outputnya :

V.Kesimpulan.
Kita bisa gunakan bootstrap untuk membantu kita membuat tampilan web dengan cepat.

VI.Refrensi.
   https://www.w3schools.com/bootstrap/bootstrap_typography.asp