Bygg Custom Responsive Progress Bars med ProgressBar.js
Progress barer är allmänt kända av de flesta användare på webben. För utvecklare är det ofta en komplicerad process att skapa en progressivfält från början. Men med ProgressBar.js du behöver inte!
Detta gratis open source-bibliotek har inga beroenden och stöder alla större webbläsare, inklusive IE9+.
Som standard kan du använd en enkel stapel, Eller kan du välj från några grundläggande former, som:
- En kö
- Halvcirkel
- Full cirkel
- Fyrkant
- Triangel
Du kan också designa dina egna anpassade former som ett hjärta, ett moln eller till och med bokstäverna på din webbplatss logotyp. Beviljas detta kommer att ta lite ansträngning men slutresultatet kan vara otroligt.
Biblioteket arbetar på SVG-vägar, så om du kan bygga en skisserad form använder SVG-markup du kan animera det med detta framstegsbibliotek.
Animationer kan också inkludera text eller har egna start / stopp mönster. Den fullständiga API har fler detaljer med alternativ / callbacks som du kan läsa på din fritid.
ProgressBar.js har också en liten installationsguide där du kan ladda ner och sätt upp skriptet med Bower, npm eller den mer förenklade GitHub-sidan.
Och om du bygger något coolt kan du skicka in din kod till GitHub repo. Projektets skapare, Kimmo Brunfeldt har en öppna GitHub-problemet där du kan skicka in egna design att inkluderas i biblioteket.
Du kan lägg till animerade framstegsfält att registrera sidor, ladda upp fält eller till en webbsida som en preloader. Alternativen begränsas endast av hur detaljerad du är villig att få.
Till exempel gillar jag lösenordsstyrdemätaren demo sedan den tjänar en riktig syfte och gynnar användarupplevelsen. Detta exempel kommer packad med plugin, så du kan kopiera det här och ändra det enligt dina önskemål.
Att se fler exempel, kolla in ProgressBar.js hemsida eller ta en titt på denna fiddle som visar hjärtatimitationen.
