Bangun Bilah Kemajuan Responsif Kustom dengan ProgressBar.js
Bilah kemajuan dikenal luas oleh sebagian besar pengguna di web. Bagi pengembang, sering kali ini proses yang rumit buat bilah kemajuan dari awal. Tetapi dengan ProgressBar.js kamu tidak harus!
Pustaka sumber terbuka gratis ini tidak memiliki dependensi dan mendukung semua browser utama, termasuk IE9+.
Secara default, Anda bisa gunakan bilah sederhana, atau kamu bisa pilih dari beberapa bentuk dasar, seperti:
- Garis tunggal
- Setengah lingkaran
- Lingkaran penuh
- Kotak
- Segi tiga
Anda juga bisa mendesain bentuk kustom Anda sendiri seperti hati, cloud, atau bahkan tulisan logo situs web Anda. Memang ini akan membutuhkan usaha tetapi hasil akhirnya bisa luar biasa.
Perpustakaan bekerja di jalur SVG, jadi kalau bisa membangun bentuk yang diuraikan menggunakan markup SVG Anda bisa menghidupkannya dengan pustaka progress bar ini.
Animasi juga bisa termasuk teks atau memiliki pola awal / berhenti kustom. API lengkap telah lebih detail dengan opsi / panggilan balik Anda dapat membaca dengan teliti di waktu luang Anda.
ProgressBar.js juga memiliki yang kecil petunjuk pemasangan dimana kamu bisa unduh & atur skrip menggunakan Bower, npm, atau halaman GitHub yang lebih sederhana.
Dan jika Anda membangun sesuatu yang keren, Anda bisa kirimkan kode Anda ke repo GitHub. Pencipta proyek, Kimmo Brunfeldt memiliki buka masalah GitHub dimana kamu bisa kirim desain khusus untuk dimasukkan dalam perpustakaan.
Kamu bisa tambahkan bilah kemajuan animasi untuk mendaftar halaman, mengunggah bidang, atau ke halaman web apa pun sebagai preloader. Opsi hanya dibatasi oleh seberapa detail Anda bersedia untuk mendapatkannya.
Misalnya, saya suka demo pengukur kekuatan kata sandi karena itu melayani tujuan nyata dan bermanfaat bagi pengalaman pengguna. Contoh ini datang dikemas dengan plugin, sehingga Anda dapat menyalin ini dan memodifikasinya sesuai dengan keinginan Anda.
Untuk melihat lebih banyak contoh, lihat beranda ProgressBar.js atau intip biola demoer animasi hati ini.
