Menciptakan Progress Bar yang Responsif dan Penuh Gaya Menggunakan ProgressBar.js

() translation by (you can also view the original English article)

Tidak ada yang terjadi secara instan pada website. Satu-satunya perbedaan adalah waktu yang dibutuhkan untuk menyelesaikan suatu proses. Beberapa proses dapat terjadi dalam beberapa milidetik, sementara yang lain dapat memakan waktu hingga beberapa detik atau menit. Misalnya, Anda mungkin mengedit gambar yang sangat besar yang diunggah oleh pengguna Anda, dan proses ini dapat memakan waktu lama. Dalam kasus seperti itu, merupakan ide yang baik untuk memberi tahu pengunjung bahwa website tidak terjebak pada suatu kondisi tetapi sebenarnya sedang bekerja pada gambar Anda dan membuat beberapa kemajuan.

Salah satu cara paling umum untuk menunjukkan kepada pengunjung tentang seberapa banyak proses telah berkembang adalah dengan menggunakan progress bar (bilah kemajuan). Dalam tutorial ini, Anda akan belajar cara menggunakan library ProgressBar.js untuk membuat progress bar yang berbeda dengan bentuk yang sederhana dan kompleks.

Menciptakan sebuah Dasar Progress Bar

Setelah Anda menyertakan library dalam proyek Anda, membuat progress bar menggunakan library ini sangat mudah. ProgressBar.js didukung di semua browser utama, termasuk IE9+, yang berarti Anda dapat menggunakannya di website apa pun yang Anda buat dengan penuh percaya diri. Anda bisa mendapatkan versi terbaru dari library tersebut melalui GitHub atau langsung menggunakan tautan CDN untuk menambahkannya di proyek Anda.

Untuk menghindari perilaku yang tidak diharapkan, harap dipastikan bahwa container dari progres bar memiliki rasio aspek yang sama dengan progress bar. Dalam kasus bentuk sebuah lingkaran, rasio aspek container harus 1:1 karena lebar akan sama dengan tinggi. Dalam kasus bentuk setengah lingkaran, rasio aspek container harus 2:1 karena lebarnya akan menggandakan tinggi. Demikian pula, dalam kasus bentuk garis yang sederhana, container harus memiliki rasio aspek 100:strokeWidth untuk garis.

Ketika membuat progress bar dengan garis, lingkaran, atau setengah lingkaran, Anda cukup menggunakan method ProgressBar.Shape() untuk membuat progress bar. Dalam hal ini, Shape bisa menjadi Circle, Line atau SemiCircle. Anda dapat melewati dua parameter menuju method Shape(). Parameter pertama adalah selector atau simpul DOM untuk mengidentifikasi container dari progress bar. Parameter kedua adalah objek dengan pasangan nilai-kunci yang menentukan tampilan progress bar.

Anda dapat menentukan warna progress bar menggunakan properti color. Setiap progress bar yang Anda buat akan memiliki warna abu-abu gelap secara default. Ketebalan progress bar dapat ditentukan menggunakan properti strokeWidth. Anda harus ingat bahwa lebar di sini tidak dalam piksel tetapi dalam hal persentase ukuran kanvas. Misalnya, jika kanvas lebarnya 200px, strokeWidth dengan nilai 5 akan menghasilkan garis tebal 10px.

Selain progress bar utama, library ini juga memungkinkan Anda menggambar garis jejak yang akan menunjukkan kepada pengunjung jalur dimana progress bar akan bergerak. Warna garis jejak dapat ditentukan menggunakan properti trailColor, dan lebarnya dapat ditentukan menggunakan properti trailWidth. Sama seperti strokeWidth, properti trailWidth juga menghitung lebar dalam persentase.

Total waktu yang dibutuhkan oleh progress bar untuk menuju dari keadaan awal ke keadaan akhir dapat ditentukan menggunakan properti duration. Secara default, progress bar akan menyelesaikan animasinya dalam 800 milidetik.

Anda dapat menggunakan properti easing untuk menentukan bagaimana progress bar harus bergerak selama animasi. Semua progress bar akan bergerak dengan kecepatan linear secara default. Untuk membuat animasi lebih menarik, Anda dapat menetapkan nilai ini yang lain seperti easeIn, easeOut, easeInOut, atau bounce.

Setelah menentukan nilai parameter awal, Anda dapat menganimasikan progress bar menggunakan method animate(). Parameter ini menerima tiga parameter. Parameter pertama adalah jumlah yang ingin Anda animasikan progress bar. Dua parameter lainnya adalah opsional. Parameter kedua dapat digunakan untuk mengesampingkan nilai properti animasi apa pun yang Anda tetapkan selama inisialisasi. Parameter ketiga adalah fungsi callback untuk melakukan sesuatu yang lain setelah animasi berakhir.

Dalam contoh berikut, saya telah membuat tiga progress bar yang berbeda menggunakan semua properti yang telah kita bahas sejauh ini.

var lineBar = new ProgressBar.Line('#line-container', {
    color: 'orange',
    strokeWidth: 2,
    trailWidth: 0.5
});

lineBar.animate(1, {
    duration: 1000
});

var circleBar = new ProgressBar.Circle('#circle-container', {
    color: 'white',
    strokeWidth: 2,
    trailWidth: 10,
    trailColor: 'black',
    easing: 'easeInOut'
});

circleBar.animate(0.75, {
    duration: 1500
});

var semiBar = new ProgressBar.SemiCircle('#semi-container', {
    color: 'violet',
    strokeWidth: 2,
    trailWidth: 0.5,
    easing: 'bounce'
});

semiBar.animate(1, {
    duration: 3000
});

Menganimasikan Nilai teks dengan Progress Bar

Satu-satunya hal yang berubah dengan animasi porgress bar dalam contoh di atas adalah panjangnya. Namun, ProgressBar.js juga memungkinkan Anda untuk mengubah atribut fisik lainnya seperti lebar dan warna pada stroke line. Dalam kasus tersebut, Anda harus menentukan nilai awal untuk progress bar dalam parameter from dan nilai akhir di dalam parameter to saat menginisialisasi progress bar.

Anda juga dapat memberi tahu library tersebut untuk membuat elemen teks yang menyertainya dengan progress bar untuk menampilkan beberapa informasi tekstual kepada pengguna Anda. Teks dapat berupa apa saja mulai dari nilai statis hingga nilai numerik yang menunjukkan proses kemajuan dari animasi. parameter text akan menerima sebuah objek sebagai nilainya.

Objek ini dapat memiliki parameter value untuk menentukan teks awal yang akan ditampilkan di dalam elemen. Anda juga dapat memberikan nama kelas untuk ditambahkan ke elemen teks menggunakan parameter className. Jika Anda ingin menerapkan beberapa inline style ke elemen teks, Anda dapat menentukan semuanya sebagai nilai parameter style. Semua style default dapat dihapus dengan menetapkan nilai style menjadi null. Penting untuk diingat bahwa nilai default hanya berlaku jika Anda belum menetapkan nilai kustom untuk setiap properti CSS di dalam style.

Nilai di dalam elemen teks akan tetap sama selama keseluruhan animasi jika Anda tidak memperbaruinya sendiri. Untungnya, ProgressBar.js juga menyediakan parameter step yang dapat digunakan untuk mendefinisikan fungsi yang dipanggil dengan setiap langkah animasi. Karena fungsi ini akan dipanggil beberapa kali setiap detik, Anda perlu berhati-hati dengan penggunaannya dan menjaga kalkulasi di dalamnya tetap sederhana.

var lineBar = new ProgressBar.Line("#line-container", {
  strokeWidth: 4,
  trailWidth: 0.5,
  from: { color: "#FF9900" },
  to: { color: "#00FF99" },
  text: {
    value: '0',
    className: 'progress-text',
    style: {
      color: 'black',
      position: 'absolute',
      top: '-30px',
      padding: 0,
      margin: 0,
      transform: null
    }
  },
  step: (state, shape) => {
    shape.path.setAttribute("stroke", state.color);
    shape.setText(Math.round(shape.value() * 100) + ' %');
  }
});

lineBar.animate(1, {
  duration: 4000
});

var circleBar = new ProgressBar.Circle("#circle-container", {
  color: "white",
  strokeWidth: 2,
  trailWidth: 25,
  trailColor: "black",
  easing: "easeInOut",
  from: { color: "#FF9900", width: 1 },
  to: { color: "#FF0099", width: 25 },
  text: {
    value: '0',
    className: 'progress-text',
    style: {
      color: 'black',
      position: 'absolute',
      top: '45%',
      left: '42%',
      padding: 0,
      margin: 0,
      transform: null
    }
  },
  step: (state, shape) => {
    shape.path.setAttribute("stroke", state.color);
    shape.path.setAttribute("stroke-width", state.width);
    shape.setText(Math.round(shape.value() * 100) + ' %');
  }
});

circleBar.animate(0.75, {
  duration: 1500
});

var semiBar = new ProgressBar.SemiCircle("#semi-container", {
  color: "violet",
  strokeWidth: 2,
  trailWidth: 8,
  trailColor: "black",
  easing: "bounce",
  from: { color: "#FF0099", width: 1 },
  to: { color: "#FF9900", width: 2 },
  text: {
    value: '0',
    className: 'progress-text',
    style: {
      color: 'black',
      position: 'absolute',
      top: '45%',
      left: '50%',
      padding: 0,
      margin: 0,
      transform: null
    }
  },
  step: (state, shape) => {
    shape.path.setAttribute("stroke", state.color);
    shape.path.setAttribute("stroke-width", state.width);
    shape.setText(Math.round(shape.value() * 100) + ' %');
  }
});

semiBar.animate(0.75, {
  duration: 2000
});

Membuat Progress Bar Dengan Bentuk Khusus

Terkadang, Anda mungkin ingin membuat progress bar dengan berbagai bentuk yang cocok dengan keseluruhan tema pada website Anda. ProgressBar.js memungkinkan Anda membuat progress bar dengan bentuk khusus menggunakan method Path(). Method ini berfungsi seperti Shape() tetapi menyediakan lebih sedikit parameter untuk melakukan kostumisasi animasi pada progress bar. Anda masih dapat memberikan nilai pada parameter duration dan easing untuk animasi. Jika Anda ingin menganimasikan warna dan lebar stroke yang digunakan untuk menggambar path khusus, Anda dapat melakukannya di dalam parameter from dan to.

LIbrary ini tidak menyediakan cara apa pun untuk menggambar jejak untuk path khusus, seperti halnya baris dan lingkaran sederhana. Namun, Anda dapat membuat sendiri jejak tersebut dengan mudah. Dalam contoh berikut, saya telah membuat progress bar segitiga menggunakan method Path().

Sebelum menulis kode JavaScript, kita harus menentukan path SVG khusus dalam HTML. Berikut adalah kode yang saya gunakan untuk membuat segitiga sederhana:

1	<svg xmlns="https://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="300" height="300" viewBox="0 0 300 300">
2	<path d="M 50 50 L 200 100 L 200 300 z" fill="none" stroke="#ddd" stroke-width="1"/>
3	<path id="triangle" d="M 50 50 L 200 100 L 200 300 z" fill="none" stroke="blue" stroke-width="5"/>
4	</svg>

Anda mungkin telah memperhatikan bahwa saya membuat dua elemen path yang berbeda. Path pertama memiliki warna abu-abu terang yang bertindak seperti jejak yang kita lihat dengan progress bar sederhana pada bagian sebelumnya. Path kedua adalah yang kita animasikan dengan kode kita nantinya. Kami telah memberikannya id yang digunakan untuk mengidentifikasi dalam kode JavaScript di bawah ini.

var path = new ProgressBar.Path("#triangle", {
  duration: 6000,
  from: {
    color: "#ff0000",
    width: 2
  },
  to: {
    color: "#0099ff",
    width: 10
  },
  strokeWidth: 4,
  easing: "easeInOut",
  step: (state, shape) => {
    shape.path.setAttribute("stroke", state.color);
    shape.path.setAttribute("stroke-width", state.width);
  }
});

path.animate(1);

Kesimpulan

Seperti yang Anda lihat dalam tutorial ini, ProgressBar.js memungkinkan Anda dengan mudah membuat berbagai jenis progress bar dengan mudah. Ini juga memberi Anda pilihan untuk menganimasikan berbagai atribut progress bar seperti lebar dan warnanya.

Tidak hanya itu, tetapi Anda juga dapat menggunakan library ini untuk mengubah nilai elemen teks yang menyertainya untuk menunjukkan proses kemajuan dalam bentuk tekstual. Tutorial ini mencakup semua yang perlu Anda ketahui untuk membuat progress bar yang sederhana. Namun, Anda dapat melihat dokumentasi untuk mempelajari lebih lanjut tentang library plugin ini.

Jika ada yang ingin saya jelaskan dalam tutorial ini, silakan beri tahu saya di kolom komentar.