Ehita kohandatud reageerivad edenemisriba ProgressBar.js-iga
Edenemisriba on enamiku veebi kasutajate seas laialdaselt tuntud. Arendajatele on see sageli keeruline protsess luua nullist edenemisriba. Aga koos ProgressBar.js sa ei pea!
See tasuta avatud lähtekoodiga raamatukogu tal pole sõltuvusi ja toetab kõiki peamisi brausereid, sealhulgas IE9+.
Vaikimisi saate seda teha kasutage lihtsat baari, või saate valige mõned põhilised kujundid, nagu näiteks:
- Üks rida
- Poolring
- Täisring
- Ruut
- Kolmnurk
Samuti saate kujundada oma kohandatud kujundeid nagu süda, pilv või isegi teie veebisaidi logo tähed. See annab mõningaid jõupingutusi, kuid lõpptulemus võib olla uskumatu.
Raamatukogu töötab SVG teedel, nii et kui saad ehitada välja kujutatud kuju kasutades SVG-märgistust animeerida selle edenemisriba raamatukoguga.
Animatsioonid võivad samuti olla sisaldama teksti või teil on kohandatud start / stoppmustrid. Täielik API on lisateavet valikute / tagasikutsumiste kohta mida saate oma vabal ajal tutvuda.
ProgressBar.js-il on ka väike paigaldusjuhend kus sa saad skripti allalaadimine ja seadistamine Bower, npm või lihtsam GitHubi leht.
Ja kui sa ehitad midagi lahedat, saate seda teha esitage oma kood GitHub reposse. Projekti looja, Kimmo Brunfeldtil on avage GitHubi probleem kus sa saad esitada kohandatud disainilahendusi raamatukogu.
Sa saad lisage animeeritud edenemisriba registreerimislehekülgedele, üleslaadimisväljadele või mis tahes veebilehe eelsalvestajana. Valikud on piiratud kui üksikasjalik sa oled valmis.
Näiteks mulle meeldib parooli tugevusmõõturi demo alates sellest teenib tegelikku eesmärki ja kasu kasutaja kogemusele. See näide tuleb pakitud pluginaga, et saaksite selle kopeerida ja oma soovi järgi muuta.
Et näha rohkem näiteid, vaadake programmi ProgressBar.js kodulehte või vaadake seda viiulit, mis demonstreerib südame animatsiooni.
