Bina Bar Kemajuan Responsif Custom dengan ProgressBar.js
Bar kemajuan dikenali ramai oleh kebanyakan pengguna di web. Bagi pemaju, ia sering menjadi proses yang rumit buat bar kemajuan dari awal. Tetapi dengan ProgressBar.js anda tidak perlu!
Perpustakaan sumber terbuka percuma ini tiada kebergantungan dan menyokong semua pelayar utama, termasuk IE9+.
Secara lalai, anda boleh gunakan bar mudah, atau anda boleh pilih dari beberapa bentuk asas, seperti:
- Barisan tunggal
- Separuh bulatan
- Bulatan penuh
- Square
- Segi tiga
Anda juga boleh membuat reka bentuk bentuk tersuai anda sendiri seperti hati, awan, atau juga huruf logo laman web anda. Diberikan ini akan mengambil sedikit usaha tetapi hasil akhirnya dapat menjadi luar biasa.
Perpustakaan berfungsi pada laluan SVG, jadi jika boleh membina bentuk yang digariskan menggunakan markup SVG yang anda boleh menghidupkannya dengan perpustakaan bar kemajuan ini.
Animasi juga boleh termasuk teks atau mempunyai corak permulaan / henti tersuai. API penuh mempunyai maklumat lanjut dengan pilihan / panggilan balik bahawa anda boleh meneliti masa lapang anda.
ProgressBar.js juga mempunyai kecil panduan pemasangan di mana anda boleh muat turun & sediakan skrip menggunakan Bower, npm, atau halaman GitHub yang lebih mudah.
Dan jika anda membina sesuatu yang sejuk, anda boleh hantar kod anda ke repo GitHub. Pencipta projek, Kimmo Brunfeldt mempunyai buka isu GitHub di mana anda boleh mengemukakan reka bentuk tersuai untuk dimasukkan ke dalam perpustakaan.
Awak boleh tambah bar perkembangan animasi untuk pendaftaran halaman, muat naik medan, atau ke mana-mana laman web sebagai preloader. Pilihan hanya terhad oleh berapa terperinci anda bersedia untuk mendapatkan.
Sebagai contoh, saya suka kata laluan meter kekuatan kata laluan sejak ia melayani tujuan sebenar dan memberi manfaat kepada pengalaman pengguna. Contoh ini datang dibungkus dengan plugin, jadi anda boleh menyalinnya dan mengubahnya mengikut keinginan anda.
Untuk melihat lebih banyak contoh, semak halaman utama ProgressBar.js atau mengintip pada biola ini menjauhkan animasi jantung.
