Bygg Custom Responsive Progress Bars med ProgressBar.js

Progress bars er kendt af de fleste brugere på nettet. For udviklere er det ofte en kompliceret proces at Opret en statuslinje fra bunden. Men med ProgressBar.js det behøver du ikke!

Dette gratis open source bibliotek har ingen afhængigheder og understøtter alle større browsere, herunder IE9+.

Som standard kan du brug en simpel bar, eller du kan vælg fra nogle få grundlæggende former, såsom:

• Enkeltlinie
• Halvkreds
• Fuld cirkel
• Firkant
• Trekant

Du kan også designe dine egne brugerdefinerede former som et hjerte, en sky eller endog bogstaverne på dit websites logo. Tildelt dette vil tage en smule indsats, men slutresultatet kan være utroligt.

Biblioteket arbejder på SVG stier, så hvis du kan bygge en skitseret form bruger SVG markup du kan animere det med dette fremdriftsbibliotek.

Animationer kan også inkludere tekst eller Har brugerdefinerede start / stop mønstre. Den fulde API har Flere detaljer med muligheder / tilbagekald at du kan gennemse på din fritid.

ProgressBar.js har også en lille installationsvejledning hvor du kan download og konfigurer scriptet ved hjælp af Bower, npm eller den mere forenklede GitHub side.

Og hvis du bygger noget godt, kan du Indsend din kode i GitHub repo. Projektets skaber, Kimmo Brunfeldt har en åbne GitHub problem hvor du kan indsende brugerdefinerede designs at blive inkluderet i biblioteket.

Du kan Tilføj animerede fremdriftsfelter at tilmelde sider, uploade felter eller til enhver webside som en preloader. Indstillingerne er kun begrænset af hvor detaljeret du er villig til at få.

For eksempel kan jeg lide demoens passwordmåler siden den tjener et reelt formål og gavner brugeroplevelsen. Dette eksempel kommer pakket med plugin, så du kan kopiere dette og ændre det til din smag.

At se flere eksempler, tjek på ProgressBar.js hjemmeside eller tag et kig på denne fiddle demoing hjerte animationen.