Kembali lagi di tutorial bootstrap ke 27, yang kali ini akan membahas mengenai salah satu komponen dari bootstrap lagi yaitu Progress atau banyak yang menyebut Progress Bar. Show Progress bar merupakan komponen bootstrap yang digunakan untuk menunjukkan kemajuan dari suatu hal. Saya yakin teman – teman tidak asing lagi dengan komponen satu ini karena kita cukup sering melihat nya. Sedikit Pejelasan bagaimana cara kerja dari progress bar pada bootstrap khususnya bootstrap versi 4: Komponen Progress ini dibuat dengan menggunakan HTML dan CSS untuk mengatur lebar dan atribut lainnya. Sebenarnya dalam HTML 5 sudah ada elemen Section Artikel Basic ProgresUntuk membuat dasar dari komponen progres bar ini kita akan menggunakan beberapa class dengan penjelasan:
langsung saja contoh dasarnya: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Basic Progress Bar</h2> <div class="progress"> <div class="progress-bar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </body> </html> Tinggi dan label Progress BarKita dapat mengatur tinggi atau tebal dari Progress bar dengan menggunakan properti CSS yaitu <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Tinggi atau tebal Progress Bar</h2> <div class="progress" style="height:10px"> <!-- tinggi nya harus mengukuti element sekunder --> <div class="progress-bar" style="width:40%;height:10px"></div> </div> <br> <div class="progress" style="height:20px"> <div class="progress-bar" style="width:50%;height:20px"></div> </div> <br> <div class="progress" style="height:30px"> <div class="progress-bar" style="width:60%;height:30px"></div> </div> </div> <div class="container"> <h2>Progress Bar dengan Label</h2> <div class="progress"> <div class="progress-bar" style="width:64%">64%</div> </div> </div> </body> </html>0. Jangan lupa untuk mengatur tinggi yang sama antara element induk dengan elemen sekunder tempat Progress bar dibuat. contoh: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Tinggi atau tebal Progress Bar</h2> <div class="progress" style="height:10px"> <!-- tinggi nya harus mengukuti element sekunder --> <div class="progress-bar" style="width:40%;height:10px"></div> </div> <br> <div class="progress" style="height:20px"> <div class="progress-bar" style="width:50%;height:20px"></div> </div> <br> <div class="progress" style="height:30px"> <div class="progress-bar" style="width:60%;height:30px"></div> </div> </div> <div class="container"> <h2>Progress Bar dengan Label</h2> <div class="progress"> <div class="progress-bar" style="width:64%">64%</div> </div> </div> </body> </html>1 Secara defult tinggi dari Progress bar dalam bootstrap adalah 16px. Untuk menambahkan label tinggal menuliskan angka pada elemen dengan class <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Tinggi atau tebal Progress Bar</h2> <div class="progress" style="height:10px"> <!-- tinggi nya harus mengukuti element sekunder --> <div class="progress-bar" style="width:40%;height:10px"></div> </div> <br> <div class="progress" style="height:20px"> <div class="progress-bar" style="width:50%;height:20px"></div> </div> <br> <div class="progress" style="height:30px"> <div class="progress-bar" style="width:60%;height:30px"></div> </div> </div> <div class="container"> <h2>Progress Bar dengan Label</h2> <div class="progress"> <div class="progress-bar" style="width:64%">64%</div> </div> </div> </body> </html>2. contoh program nya: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Tinggi atau tebal Progress Bar</h2> <div class="progress" style="height:10px"> <!-- tinggi nya harus mengukuti element sekunder --> <div class="progress-bar" style="width:40%;height:10px"></div> </div> <br> <div class="progress" style="height:20px"> <div class="progress-bar" style="width:50%;height:20px"></div> </div> <br> <div class="progress" style="height:30px"> <div class="progress-bar" style="width:60%;height:30px"></div> </div> </div> <div class="container"> <h2>Progress Bar dengan Label</h2> <div class="progress"> <div class="progress-bar" style="width:64%">64%</div> </div> </div> </body> </html> Warna Progress BarSebelum ke pembahasan mengenai pemberian warna pada progress bar maka silahkan baca dahulu Warna di Bootstrap: Bootstrap Tutorial #6. Karena artikel tersebut sedikit banyak akan digunakan pada bagian ini. Untuk memberi warna pada progress bar kita hanya perlu menambahkan class utilitas yang dimiliki bootstrap yaitu warna. Ada beberapa pilihan diantaranya: ClassWarna<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Tinggi atau tebal Progress Bar</h2> <div class="progress" style="height:10px"> <!-- tinggi nya harus mengukuti element sekunder --> <div class="progress-bar" style="width:40%;height:10px"></div> </div> <br> <div class="progress" style="height:20px"> <div class="progress-bar" style="width:50%;height:20px"></div> </div> <br> <div class="progress" style="height:30px"> <div class="progress-bar" style="width:60%;height:30px"></div> </div> </div> <div class="container"> <h2>Progress Bar dengan Label</h2> <div class="progress"> <div class="progress-bar" style="width:64%">64%</div> </div> </div> </body> </html>3warna background hijau <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Tinggi atau tebal Progress Bar</h2> <div class="progress" style="height:10px"> <!-- tinggi nya harus mengukuti element sekunder --> <div class="progress-bar" style="width:40%;height:10px"></div> </div> <br> <div class="progress" style="height:20px"> <div class="progress-bar" style="width:50%;height:20px"></div> </div> <br> <div class="progress" style="height:30px"> <div class="progress-bar" style="width:60%;height:30px"></div> </div> </div> <div class="container"> <h2>Progress Bar dengan Label</h2> <div class="progress"> <div class="progress-bar" style="width:64%">64%</div> </div> </div> </body> </html>4warna background biru tua <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Tinggi atau tebal Progress Bar</h2> <div class="progress" style="height:10px"> <!-- tinggi nya harus mengukuti element sekunder --> <div class="progress-bar" style="width:40%;height:10px"></div> </div> <br> <div class="progress" style="height:20px"> <div class="progress-bar" style="width:50%;height:20px"></div> </div> <br> <div class="progress" style="height:30px"> <div class="progress-bar" style="width:60%;height:30px"></div> </div> </div> <div class="container"> <h2>Progress Bar dengan Label</h2> <div class="progress"> <div class="progress-bar" style="width:64%">64%</div> </div> </div> </body> </html>5warna background oranye <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Tinggi atau tebal Progress Bar</h2> <div class="progress" style="height:10px"> <!-- tinggi nya harus mengukuti element sekunder --> <div class="progress-bar" style="width:40%;height:10px"></div> </div> <br> <div class="progress" style="height:20px"> <div class="progress-bar" style="width:50%;height:20px"></div> </div> <br> <div class="progress" style="height:30px"> <div class="progress-bar" style="width:60%;height:30px"></div> </div> </div> <div class="container"> <h2>Progress Bar dengan Label</h2> <div class="progress"> <div class="progress-bar" style="width:64%">64%</div> </div> </div> </body> </html>6warna background merah <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Tinggi atau tebal Progress Bar</h2> <div class="progress" style="height:10px"> <!-- tinggi nya harus mengukuti element sekunder --> <div class="progress-bar" style="width:40%;height:10px"></div> </div> <br> <div class="progress" style="height:20px"> <div class="progress-bar" style="width:50%;height:20px"></div> </div> <br> <div class="progress" style="height:30px"> <div class="progress-bar" style="width:60%;height:30px"></div> </div> </div> <div class="container"> <h2>Progress Bar dengan Label</h2> <div class="progress"> <div class="progress-bar" style="width:64%">64%</div> </div> </div> </body> </html>7warna background putih <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Tinggi atau tebal Progress Bar</h2> <div class="progress" style="height:10px"> <!-- tinggi nya harus mengukuti element sekunder --> <div class="progress-bar" style="width:40%;height:10px"></div> </div> <br> <div class="progress" style="height:20px"> <div class="progress-bar" style="width:50%;height:20px"></div> </div> <br> <div class="progress" style="height:30px"> <div class="progress-bar" style="width:60%;height:30px"></div> </div> </div> <div class="container"> <h2>Progress Bar dengan Label</h2> <div class="progress"> <div class="progress-bar" style="width:64%">64%</div> </div> </div> </body> </html>8warna background abu-abu <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Tinggi atau tebal Progress Bar</h2> <div class="progress" style="height:10px"> <!-- tinggi nya harus mengukuti element sekunder --> <div class="progress-bar" style="width:40%;height:10px"></div> </div> <br> <div class="progress" style="height:20px"> <div class="progress-bar" style="width:50%;height:20px"></div> </div> <br> <div class="progress" style="height:30px"> <div class="progress-bar" style="width:60%;height:30px"></div> </div> </div> <div class="container"> <h2>Progress Bar dengan Label</h2> <div class="progress"> <div class="progress-bar" style="width:64%">64%</div> </div> </div> </body> </html>9warna background abu-abu terang <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Warna Progress Bars</h2> <!-- Biru --> <div class="progress"> <div class="progress-bar" style="width:10%"></div> </div><br> <!-- Hijau --> <div class="progress"> <div class="progress-bar bg-success" style="width:20%"></div> </div><br> <!-- biru tua --> <div class="progress"> <div class="progress-bar bg-info" style="width:30%"></div> </div><br> <!-- oranye --> <div class="progress"> <div class="progress-bar bg-warning" style="width:40%"></div> </div><br> <!-- merah --> <div class="progress"> <div class="progress-bar bg-danger" style="width:50%"></div> </div><br> <!-- putih --> <div class="progress border"> <div class="progress-bar bg-white" style="width:60%"></div> </div><br> <!-- abu-abu --> <div class="progress"> <div class="progress-bar bg-secondary" style="width:70%"></div> </div><br> <!-- abu-abu terang --> <div class="progress border"> <div class="progress-bar bg-light" style="width:80%"></div> </div><br> <!-- hitam --> <div class="progress"> <div class="progress-bar bg-dark" style="width:90%"></div> </div> </div> </body> </html>0warna background hitam <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Warna Progress Bars</h2> <!-- Biru --> <div class="progress"> <div class="progress-bar" style="width:10%"></div> </div><br> <!-- Hijau --> <div class="progress"> <div class="progress-bar bg-success" style="width:20%"></div> </div><br> <!-- biru tua --> <div class="progress"> <div class="progress-bar bg-info" style="width:30%"></div> </div><br> <!-- oranye --> <div class="progress"> <div class="progress-bar bg-warning" style="width:40%"></div> </div><br> <!-- merah --> <div class="progress"> <div class="progress-bar bg-danger" style="width:50%"></div> </div><br> <!-- putih --> <div class="progress border"> <div class="progress-bar bg-white" style="width:60%"></div> </div><br> <!-- abu-abu --> <div class="progress"> <div class="progress-bar bg-secondary" style="width:70%"></div> </div><br> <!-- abu-abu terang --> <div class="progress border"> <div class="progress-bar bg-light" style="width:80%"></div> </div><br> <!-- hitam --> <div class="progress"> <div class="progress-bar bg-dark" style="width:90%"></div> </div> </div> </body> </html>1warna background biru muda . Secara default warna dari Progress bar bootstrap adalah menggunakan class <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Warna Progress Bars</h2> <!-- Biru --> <div class="progress"> <div class="progress-bar" style="width:10%"></div> </div><br> <!-- Hijau --> <div class="progress"> <div class="progress-bar bg-success" style="width:20%"></div> </div><br> <!-- biru tua --> <div class="progress"> <div class="progress-bar bg-info" style="width:30%"></div> </div><br> <!-- oranye --> <div class="progress"> <div class="progress-bar bg-warning" style="width:40%"></div> </div><br> <!-- merah --> <div class="progress"> <div class="progress-bar bg-danger" style="width:50%"></div> </div><br> <!-- putih --> <div class="progress border"> <div class="progress-bar bg-white" style="width:60%"></div> </div><br> <!-- abu-abu --> <div class="progress"> <div class="progress-bar bg-secondary" style="width:70%"></div> </div><br> <!-- abu-abu terang --> <div class="progress border"> <div class="progress-bar bg-light" style="width:80%"></div> </div><br> <!-- hitam --> <div class="progress"> <div class="progress-bar bg-dark" style="width:90%"></div> </div> </div> </body> </html>1tabel class warna Contoh nya adalah: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Warna Progress Bars</h2> <!-- Biru --> <div class="progress"> <div class="progress-bar" style="width:10%"></div> </div><br> <!-- Hijau --> <div class="progress"> <div class="progress-bar bg-success" style="width:20%"></div> </div><br> <!-- biru tua --> <div class="progress"> <div class="progress-bar bg-info" style="width:30%"></div> </div><br> <!-- oranye --> <div class="progress"> <div class="progress-bar bg-warning" style="width:40%"></div> </div><br> <!-- merah --> <div class="progress"> <div class="progress-bar bg-danger" style="width:50%"></div> </div><br> <!-- putih --> <div class="progress border"> <div class="progress-bar bg-white" style="width:60%"></div> </div><br> <!-- abu-abu --> <div class="progress"> <div class="progress-bar bg-secondary" style="width:70%"></div> </div><br> <!-- abu-abu terang --> <div class="progress border"> <div class="progress-bar bg-light" style="width:80%"></div> </div><br> <!-- hitam --> <div class="progress"> <div class="progress-bar bg-dark" style="width:90%"></div> </div> </div> </body> </html> Stripped progress barsApakah progress bar teman -teman terlihat monoton, coba gunakan class <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Warna Progress Bars</h2> <!-- Biru --> <div class="progress"> <div class="progress-bar" style="width:10%"></div> </div><br> <!-- Hijau --> <div class="progress"> <div class="progress-bar bg-success" style="width:20%"></div> </div><br> <!-- biru tua --> <div class="progress"> <div class="progress-bar bg-info" style="width:30%"></div> </div><br> <!-- oranye --> <div class="progress"> <div class="progress-bar bg-warning" style="width:40%"></div> </div><br> <!-- merah --> <div class="progress"> <div class="progress-bar bg-danger" style="width:50%"></div> </div><br> <!-- putih --> <div class="progress border"> <div class="progress-bar bg-white" style="width:60%"></div> </div><br> <!-- abu-abu --> <div class="progress"> <div class="progress-bar bg-secondary" style="width:70%"></div> </div><br> <!-- abu-abu terang --> <div class="progress border"> <div class="progress-bar bg-light" style="width:80%"></div> </div><br> <!-- hitam --> <div class="progress"> <div class="progress-bar bg-dark" style="width:90%"></div> </div> </div> </body> </html>3 untuk memberi efek bergaris pada progress bar. Class tersebut ditempatkan dalam elemen sekunder setelah class <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Tinggi atau tebal Progress Bar</h2> <div class="progress" style="height:10px"> <!-- tinggi nya harus mengukuti element sekunder --> <div class="progress-bar" style="width:40%;height:10px"></div> </div> <br> <div class="progress" style="height:20px"> <div class="progress-bar" style="width:50%;height:20px"></div> </div> <br> <div class="progress" style="height:30px"> <div class="progress-bar" style="width:60%;height:30px"></div> </div> </div> <div class="container"> <h2>Progress Bar dengan Label</h2> <div class="progress"> <div class="progress-bar" style="width:64%">64%</div> </div> </div> </body> </html>2. Contoh penggunaannya adalah: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="progress"> <div class="progress-bar progress-bar-striped" style="width:30%"></div> </div> <br> <div class="progress"> <div class="progress-bar bg-success progress-bar-striped" style="width:40%"></div> </div> <br> <div class="progress"> <div class="progress-bar bg-info progress-bar-striped" style="width:50%"></div> </div> <br> <div class="progress"> <div class="progress-bar bg-warning progress-bar-striped" style="width:60%"></div> </div> <br> <div class="progress"> <div class="progress-bar bg-danger progress-bar-striped" style="width:70%"></div> </div> </div> </body> </html> Animasi Progres BarKalau bisa ditambahkan efek striped atau bergaris apakah progress bar dapat dianimasikan ? jawabannya tentu saja bisa, yaitu dengan menambahkan class <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Warna Progress Bars</h2> <!-- Biru --> <div class="progress"> <div class="progress-bar" style="width:10%"></div> </div><br> <!-- Hijau --> <div class="progress"> <div class="progress-bar bg-success" style="width:20%"></div> </div><br> <!-- biru tua --> <div class="progress"> <div class="progress-bar bg-info" style="width:30%"></div> </div><br> <!-- oranye --> <div class="progress"> <div class="progress-bar bg-warning" style="width:40%"></div> </div><br> <!-- merah --> <div class="progress"> <div class="progress-bar bg-danger" style="width:50%"></div> </div><br> <!-- putih --> <div class="progress border"> <div class="progress-bar bg-white" style="width:60%"></div> </div><br> <!-- abu-abu --> <div class="progress"> <div class="progress-bar bg-secondary" style="width:70%"></div> </div><br> <!-- abu-abu terang --> <div class="progress border"> <div class="progress-bar bg-light" style="width:80%"></div> </div><br> <!-- hitam --> <div class="progress"> <div class="progress-bar bg-dark" style="width:90%"></div> </div> </div> </body> </html>5 setelah class <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Warna Progress Bars</h2> <!-- Biru --> <div class="progress"> <div class="progress-bar" style="width:10%"></div> </div><br> <!-- Hijau --> <div class="progress"> <div class="progress-bar bg-success" style="width:20%"></div> </div><br> <!-- biru tua --> <div class="progress"> <div class="progress-bar bg-info" style="width:30%"></div> </div><br> <!-- oranye --> <div class="progress"> <div class="progress-bar bg-warning" style="width:40%"></div> </div><br> <!-- merah --> <div class="progress"> <div class="progress-bar bg-danger" style="width:50%"></div> </div><br> <!-- putih --> <div class="progress border"> <div class="progress-bar bg-white" style="width:60%"></div> </div><br> <!-- abu-abu --> <div class="progress"> <div class="progress-bar bg-secondary" style="width:70%"></div> </div><br> <!-- abu-abu terang --> <div class="progress border"> <div class="progress-bar bg-light" style="width:80%"></div> </div><br> <!-- hitam --> <div class="progress"> <div class="progress-bar bg-dark" style="width:90%"></div> </div> </div> </body> </html>6. Class tersebut akan menyebabkan efek stripped pada progress bar seolah – oleh berputar atau dianimasikan. contoh penerapannya: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Animasi Progress Bar</h2> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div> </div> </div> </body> </html> Multiple Progress BarSelain diberi efek stripped atau dianimasikan kita juga dapat membuat progress bar dengan membaginya menjadi beberapa bagian seperti 20% nya diberi warna merah, 30% diberi warna oranye, sisa nya tetap biru. untuk melakukan itu kita cukup menambahkan komponen dengan class <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Tinggi atau tebal Progress Bar</h2> <div class="progress" style="height:10px"> <!-- tinggi nya harus mengukuti element sekunder --> <div class="progress-bar" style="width:40%;height:10px"></div> </div> <br> <div class="progress" style="height:20px"> <div class="progress-bar" style="width:50%;height:20px"></div> </div> <br> <div class="progress" style="height:30px"> <div class="progress-bar" style="width:60%;height:30px"></div> </div> </div> <div class="container"> <h2>Progress Bar dengan Label</h2> <div class="progress"> <div class="progress-bar" style="width:64%">64%</div> </div> </div> </body> </html>2 lagi sebanyak yang kita mau dengan syarat masih didalam satu elemen dengan class <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Warna Progress Bars</h2> <!-- Biru --> <div class="progress"> <div class="progress-bar" style="width:10%"></div> </div><br> <!-- Hijau --> <div class="progress"> <div class="progress-bar bg-success" style="width:20%"></div> </div><br> <!-- biru tua --> <div class="progress"> <div class="progress-bar bg-info" style="width:30%"></div> </div><br> <!-- oranye --> <div class="progress"> <div class="progress-bar bg-warning" style="width:40%"></div> </div><br> <!-- merah --> <div class="progress"> <div class="progress-bar bg-danger" style="width:50%"></div> </div><br> <!-- putih --> <div class="progress border"> <div class="progress-bar bg-white" style="width:60%"></div> </div><br> <!-- abu-abu --> <div class="progress"> <div class="progress-bar bg-secondary" style="width:70%"></div> </div><br> <!-- abu-abu terang --> <div class="progress border"> <div class="progress-bar bg-light" style="width:80%"></div> </div><br> <!-- hitam --> <div class="progress"> <div class="progress-bar bg-dark" style="width:90%"></div> </div> </div> </body> </html>8. Contohnya: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Multiple Progress Bar</h2> <div class="progress"> <div class="progress-bar bg-success" style="width:40%"> Ini 40% </div> <div class="progress-bar bg-warning" style="width:30%"> ini 30% </div> <div class="progress-bar bg-danger" style="width:20%"> Ini 20% </div> </div> </div> </body> </html> Sekian penjelasan mengenai komponen bootstrap yaitu progress bar, teman teman dapat berekperimen sendiri dengan mengganti CSS atau memakai javascript agar sesuai dengan kebutuhan teman-teman. |