Membuat Progress Bar Dengan JavaScript

Dalam pengembangan web, seringkali kita perlu memberikan pengguna visualisasi tentang kemajuan suatu proses, seperti pengunggahan file, pengunduhan, atau tugas yang sedang berjalan. Salah satu cara yang umum digunakan adalah dengan menggunakan progress bar. Progress bar adalah elemen visual yang menunjukkan sejauh mana suatu tugas telah diselesaikan. Dalam artikel ini, kita akan belajar cara membuat progress bar interaktif menggunakan JavaScript.

Langkah 1: Persiapan HTML

Langkah pertama adalah menyiapkan struktur HTML untuk progress bar. Kita akan menggunakan elemen <div> sebagai wrapper untuk progress bar. Berikan elemen ini sebuah id unik untuk referensi dalam JavaScript. Berikut adalah contoh kode HTML-nya:

<div id="progress-bar">
  <div id="progress"></div>
</div>

Pada contoh di atas, kita memiliki elemen <div> dengan id “progress-bar” sebagai wrapper dan elemen <div> dengan id “progress” sebagai indikator kemajuan sebenarnya. Progress bar akan mengisi lebar elemen “progress” sesuai dengan kemajuan yang sedang berlangsung.

Langkah 2: Gaya CSS

Setelah menyiapkan struktur HTML, langkah selanjutnya adalah menerapkan gaya CSS untuk mengatur tampilan progress bar. Berikut adalah contoh kode CSS-nya:

#progress-bar {
  width: 100%;
  height: 20px;
  background-color: #f1f1f1;
  border-radius: 5px;
}

#progress {
  height: 100%;
  background-color: #4caf50;
  border-radius: 5px;
  width: 0;
}

Pada contoh di atas, kita menggunakan properti width dan height untuk mengatur ukuran progress bar. Warna latar belakang dan warna kemajuan ditentukan oleh properti background-color. Properti border-radius digunakan untuk memberikan tampilan yang lebih halus pada sudut-sudut progress bar.

Langkah 3: Logika JavaScript

Sekarang kita akan menambahkan logika JavaScript untuk mengendalikan kemajuan pada progress bar. Kita akan menggunakan JavaScript untuk mengubah lebar elemen “progress” secara dinamis. Berikut adalah contoh kode JavaScript-nya:

function progressBar() {
  var progress = document.getElementById("progress");
  var width = 0;
  var interval = setInterval(frame, 10);

  function frame() {
    if (width >= 100) {
      clearInterval(interval);
    } else {
      width++;
      progress.style.width = width + "%";
    }
  }
}

Pada contoh di atas, kita membuat sebuah fungsi bernama progressBar() yang akan mengontrol kemajuan pada progress bar. Variabel progress digunakan untuk mendapatkan elemen dengan id “progress”. Variabel width akan menyimpan kemajuan saat ini, dimulai dari 0. Kemudian, kita menggunakan setInterval() untuk memanggil fungsi frame() setiap 10 milidetik.

Dalam fungsi frame(), kita melakukan pengecekan jika width sudah mencapai 100 atau lebih, maka kita menghentikan interval dengan clearInterval(). Jika belum, kita tambahkan nilai width dan mengubah lebar elemen “progress” sesuai dengan nilai width yang baru.

Langkah 4: Memulai Progress Bar

Terakhir, kita perlu memanggil fungsi progressBar() agar progress bar dimulai. Kita bisa memanggil fungsi ini saat halaman selesai dimuat atau saat event tertentu terjadi. Berikut adalah contoh kode untuk memanggil fungsi progressBar() saat halaman selesai dimuat:

window.onload = function() {
  progressBar();
};

Dengan kode di atas, saat halaman selesai dimuat, fungsi progressBar() akan dijalankan dan progress bar akan dimulai.

Penutup

Dengan mengikuti langkah-langkah di atas, Anda dapat membuat progress bar interaktif menggunakan JavaScript. Progress bar dapat memberikan pengalaman visual yang lebih baik kepada pengguna saat menghadapi tugas-tugas yang memerlukan waktu. Jangan ragu untuk mencoba variasi dan penyesuaian lain untuk membuat progress bar sesuai dengan kebutuhan Anda.

Semoga artikel ini bermanfaat dan selamat mencoba!