Veidojiet pielāgotus progresīvus stieņus ar ProgressBar.js
Progresa joslas vairums lietotāju ir plaši pazīstami tīmeklī. Izstrādātājiem tas bieži ir sarežģīts process izveidojiet progresa joslu no nulles. Bet ar ProgressBar.js jums nav!
Šī bezmaksas atvērtā koda bibliotēka nav atkarības un atbalsta visas galvenās pārlūkprogrammas, ieskaitot IE9+.
Pēc noklusējuma jūs varat izmantot vienkāršu joslu, vai jūs varat izvēlieties no dažām pamatformām, piemēram:
- Viena līnija
- Pusaplis
- Pilns aplis
- Kvadrāts
- Trīsstūris
Varat arī izstrādāt savas pielāgotās formas piemēram, sirds, mākonis vai pat jūsu vietnes logotipa burti. Piešķirot tam būs jāpieliek pūles, bet gala rezultāts var būt neticami.
Bibliotēka darbojas uz SVG ceļiem, tāpēc, ja jūs varat veidot iezīmētu formu izmantojot SVG atzīmi animēt to ar šo progresa joslas bibliotēku.
Animācijas var arī iekļaut tekstu vai ir pielāgoti sākuma / beigu modeļi. Pilns API ir sīkāka informācija ar opcijām / atsaukumiem ka jūs varat iepazīties ar savu atpūtu.
ProgressBar.js ir arī neliels instalēšanas rokasgrāmata kur jūs varat lejupielādēt un iestatīt skriptu izmantojot Bower, npm vai vienkāršāku GitHub lapu.
Un, ja jūs veidojat kaut ko vēsu, jūs varat iesniedziet savu kodu GitHub repo. Projekta veidotājam Kimmo Brunfeldt ir atvērt GitHub problēmu kur jūs varat iesniegt pielāgotus dizainus jāiekļauj bibliotēkā.
Jūs varat pievienot animācijas progresa joslas pierakstīšanās lapām, augšupielādes laukiem vai jebkurai tīmekļa lapai kā preloader. Iespējas ir ierobežotas tikai cik sīki jūs esat gatavi saņemt.
Piemēram, man patīk paroles stipruma mērītāja demonstrācija kopš tā kalpo reālam mērķim un priekšrocības lietotājiem. Šis piemērs nāk iepakots ar spraudni, lai jūs varētu to kopēt un modificēt.
Redzēt vairāk piemēru, apskatiet ProgressBar.js mājaslapu vai apmeklējiet šo piekariņu, kas demonstrē sirds animāciju.