Maak aangepaste responsieve voortgangsbalken met ProgressBar.js
Voortgangsbalken zijn algemeen bekend bij de meeste gebruikers op internet. Voor ontwikkelaars is dit vaak een ingewikkeld proces maak een voortgangsbalk vanuit het niets. Maar met ProgressBar.js dat hoeft niet!
Deze gratis open source-bibliotheek heeft geen afhankelijkheden en ondersteunt alle belangrijke browsers, inclusief IE9+.
Standaard kunt u dit doen gebruik een eenvoudige balk, of je kan selecteer een paar basisvormen, zoals:
- Enkele lijn
- Halve cirkel
- Volledige cirkel
- Plein
- Driehoek
Je kunt ook ontwerpen uw eigen aangepaste vormen zoals een hart, een wolk, of zelfs de belettering van het logo van uw website. Toegegeven, dit kost wat moeite, maar het eindresultaat kan ongelooflijk zijn.
De bibliotheek werkt op SVG-paden, dus als je kunt bouw een geschetste vorm met behulp van SVG-markeringen die u kunt animeer het met deze voortgangsbalkbibliotheek.
Animaties kunnen ook tekst opnemen of hebben aangepaste start / stop-patronen. De volledige API heeft meer details met opties / callbacks die je op je gemak kunt bekijken.
ProgressBar.js heeft ook een kleine installatie gids waar je kan download & stel het script in met behulp van Bower, npm of de meer vereenvoudigde GitHub-pagina.
En als je iets cools bouwt, dan kan dat verzend uw code naar de GitHub-repo. De maker van het project, Kimmo Brunfeldt, heeft een Open GitHub-probleem waar je kan verzend aangepaste ontwerpen om opgenomen te worden in de bibliotheek.
Jij kan voeg geanimeerde voortgangsbalken toe naar aanmeldingspagina's, velden uploaden of naar een webpagina als preloader. De opties worden alleen beperkt door hoe gedetailleerd je bent bereid om te krijgen.
Ik hou bijvoorbeeld van de demo van de wachtwoordsterktemeter, omdat deze er is dient een echt doel en komt de gebruikerservaring ten goede. Dit voorbeeld komt verpakt met de plug-in, dus je kunt dit kopiëren en naar wens aanpassen.
Zien meer voorbeelden, Bekijk de ProgressBar.js-startpagina of neem een kijkje op deze viool om de hartanimatie te demonstreren.
