Bygg Custom Responsive Progress Bars med ProgressBar.js

Progress bars er allment kjent av de fleste brukere på nettet. For utviklere er det ofte en komplisert prosess for å lage en fremdriftslinje fra bunnen av . Men med ProgressBar.js trenger du ikke!

Dette gratis open source-biblioteket har ingen avhengighet og støtter alle de store nettleserne, inkludert IE9 +.

Som standard kan du bruke en enkel linje, eller du kan velge mellom noen få grunnleggende former, for eksempel:

• Enkel linje
• Halvsirkel
• Full sirkel
• Torget
• Triangel

Du kan også designe dine egne tilpassede former som 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 fungerer på SVG-baner, så hvis du kan bygge en skissert form ved hjelp av SVG-oppsett, kan du animere den med dette fremdriftslinjebiblioteket.

Animasjoner kan også inkludere tekst eller har tilpassede start / stopp mønstre . Den fulle API-en har flere detaljer med alternativer / tilbakeringinger som du kan lese på fritiden.

ProgressBar.js har også en liten installasjonsveiledning der du kan laste ned og konfigurere skriptet med Bower, npm eller den mer forenklede GitHub-siden.

Og hvis du bygger noe kul kan du sende inn koden til GitHub repo . Prosjektets skaperen, Kimmo Brunfeldt, har et åpent GitHub-problem hvor du kan sende inn tilpassede design som skal inkluderes i biblioteket.

Du kan legge til animerte fremdriftslinjer for å registrere sider, laste opp felt eller til en hvilken som helst nettside som en forhåndsinnlasting. Alternativene er bare begrenset av hvor detaljert du er villig til å få.

For eksempel liker jeg passordstyrkeemåleren demo siden den tjener en reell hensikt og fordeler brukeropplevelsen . Dette eksemplet kommer pakket med pluginet, så du kan kopiere dette og endre det til din smak.

For å se flere eksempler, sjekk ut ProgressBar.js hjemmeside eller ta en titt på denne fienden som demoerer hjerteanimasjonen.