Creëer Single-Element Spinners en Laders met CSSPIN
Je kunt een aantal fantastische dingen bouwen met CSS3, uit aangepaste invoervelden naar dropdowns en zelfs vectorafbeeldingen. Deze technieken zijn snel JavaScript inhalen, het voor ontwikkelaars gemakkelijker maken om betere gebruikerservaringen te creëren.
Een van de lastigste dingen om te bouwen is een animatie van spinner laden maar moderne CSS-animatie maakt dat zelfs vrij eenvoudig.
Om tijd te sparen vanuit de grond af, kun je een bibliotheek gebruiken zoals CSSPIN met heel veel vooraf gedefinieerde aangepaste spinners. Al deze animaties zijn gratis te klonen en volledig open source, dus je hebt het gedaan volledige toegang om de code naar wens te bewerken.
Het instellen van een spinner met deze bibliotheek is een koud kunstje. Jij gewoon kopieer de CSS-bibliotheek naar uw pagina voeg de aangepaste HTML-elementen toe waar je maar wilt dat ze verschijnen.
Deze aangepaste spinners gebruiken alleen één HTML-element om het animatie-effect te creëren. Dit is enorm omdat het grafische en het animatie-effect dat is zuiver weergegeven via CSS-klassen.
En aangezien u toegang hebt tot de broncode die u kunt gebruiken vervang de vormen, kleuren, grootten en animatiesnelheden om beter bij uw projecten te passen.
Noteer de code gebruikt de LESS-syntaxis, dus u moet bekend zijn met die voorbewerkingstaal om grote bewerkingen uit te voeren.
Maar je kunt er veel van vinden duidelijke CSS-voorbeelden op de hoofddemppagina, samen met eenvoudige instructies op de GitHub-pagina.
Als je bekend bent met NPM of Prieel dit zijn alternatieve methoden voor het installeren van de bibliotheek.
Hoe je het ook installeert, dit is een geweldige CSS-animatiebibliotheek om mee te werken. Het moet zo zijn volledig modulair met voldoende ruimte voor nieuwe spinners, nieuwe animaties en aanpassingen van andere ontwikkelaars.
Voor meer informatie en bladeren door alle documentatie, bekijk de CSSPIN repo op GitHub. De maker maakte ook een kleine video instellen die je hieronder kunt bekijken.
