Bygg Custom Responsive Progress Bars med ProgressBar.js
Progress bars er kjent av de fleste brukere på nettet. For utviklere er det ofte en komplisert prosess å lag en fremdriftslinje fra grunnen av. Men med ProgressBar.js du trenger ikke å!
Dette gratis open source biblioteket har ingen avhengigheter og støtter alle de store nettleserne, inkludert IE9+.
Som standard kan du bruk en enkel bar, eller du kan velg fra noen få grunnleggende former, som for eksempel:
- Enkel linje
- Halvsirkel
- Full sirkel
- Torget
- Triangel
Du kan også designe dine egne tilpassede former for eksempel et hjerte, en sky, eller til og med bokstaveringen av nettstedets logo. Gitt dette vil ta litt innsats, men sluttresultatet kan være utrolig.
Biblioteket jobber på SVG-stier, så hvis du kan bygge en skissert form bruker SVG-markup du kan animere det med dette fremdriftslinjebiblioteket.
Animasjoner kan også inkludere tekst eller har tilpassede start / stopp mønstre. Den fulle API har Flere detaljer med alternativer / tilbakeringinger som du kan lese på fritiden.
ProgressBar.js har også en liten installasjonsveiledning hvor du kan Last ned og sett opp skriptet bruker Bower, npm eller den mer forenklede GitHub-siden.
Og hvis du bygger noe kult du kan send inn koden din til GitHub repo. Prosjektets skaperen, Kimmo Brunfeldt har en åpne GitHub problemet hvor du kan sende tilpassede design å bli med på biblioteket.
Du kan legg til animerte fremdriftslinjer å registrere sider, laste opp felt eller til hvilken som helst nettside som en forhåndsinnlasting. Alternativene er bare begrenset av hvor detaljert du er villig til å få.
For eksempel liker jeg passordstyrkeremåleren siden den tjener en reell hensikt og fordeler brukeropplevelsen. Dette eksemplet kommer pakket med plugin, slik at du kan kopiere dette og endre det til din smak.
Å se flere eksempler, sjekk ut ProgressBar.js hjemmeside eller ta en titt på denne fienden som demoerer hjerteanimasjonen.
