nl.hideout-lastation.com
Maak aangepaste responsieve voortgangsbalken met ProgressBar.js
Voortgangsbalken zijn bij de meeste gebruikers op internet algemeen bekend. Voor ontwikkelaars is het vaak een ingewikkeld proces om vanuit het niets een voortgangsbalk te maken . Maar met ProgressBar.js hoeft dat niet!
Deze gratis open-sourcebibliotheek heeft geen afhankelijkheden en ondersteunt alle belangrijke browsers, inclusief IE9 +.
Standaard kunt u een eenvoudige balk gebruiken, of u kunt kiezen uit een paar basisvormen, zoals:- Enkele lijn
- Halve cirkel
- Volledige cirkel
- Plein
- Driehoek
U kunt ook uw eigen aangepaste vormen ontwerpen, 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 u een geschetste vorm kunt maken met SVG-markeringen, kunt u deze animeren met deze voortgangsbalkbibliotheek.
Animaties kunnen ook tekst bevatten of aangepaste start / stop-patronen hebben . De volledige API heeft meer details met opties / callbacks die u op uw gemak kunt bekijken.
ProgressBar.js heeft ook een kleine installatiegids waar je het script kunt downloaden en instellen met behulp van Bower, npm of de meer vereenvoudigde GitHub-pagina.
En als je iets cools bouwt, kun je je code in de GitHub-repo indienen . De maker van het project, Kimmo Brunfeldt, heeft een open GitHub-probleem waarbij je aangepaste ontwerpen kunt indienen om in de bibliotheek te kunnen opnemen.
U kunt geanimeerde voortgangsbalkjes toevoegen aan aanmeldingspagina's, velden uploaden of naar een webpagina als preloader. De opties worden alleen beperkt door hoe gedetailleerd je bereid bent om te krijgen.
Ik hou bijvoorbeeld van de demo van de wachtwoordsterktemeter, omdat deze een echt doel dient en de gebruikerservaring ten goede komt . Dit exemplaar wordt geleverd bij de plug-in, dus u kunt dit kopiëren en naar wens aanpassen.
Ga voor meer voorbeelden naar de startpagina van ProgressBar.js of neem een kijkje bij deze viool om de hartanimatie te demonstreren.
Hoe CSS-overlapt alleen Effect met Box-Shadow
Content-overlays zijn een prominent onderdeel van modern webdesign. Ze helpen u een element op een webpagina te verbergen en later - met toestemming van de gebruiker - het te onthullen en extra informatie of bedieningselementen weer te geven, zoals knoppen erachter.Een typische overlay is semi-transparant, met een effen achtergrondkleur (meestal zwart) en er zijn enkele tekst of knoppen voor gebruikers om te zien of om te gebruiken
9 High-Tech speelgoed & gadgets Ontworpen voor kinderen
Er zijn veel ouders die zich zorgen maken over het feit dat hun kinderen te veel online tijd doorbrengen, of op smartphones en tablets. Leren programmeren kan echter een van de vele essentiële vaardigheden worden die uw kind nodig heeft in zijn of haar toekomstige leven.In plaats van technologie uit hun leven te halen, zijn er slimme gadgets beschikbaar die kinderen kunnen helpen bij het ontwikkelen van programmeervaardigheden en tegelijkertijd een veilige omgeving bieden om te verkennen, te spelen en te groeien.
