Crea spinners e caricatori a elemento singolo con CSSPIN
Puoi creare cose incredibili con CSS3, da campi di input personalizzati a menu a discesa e persino grafica vettoriale. Queste tecniche sono rapidamente sorpasso JavaScript, semplificando agli sviluppatori la creazione di esperienze utente migliori.
Una delle cose più difficili da costruire è a caricamento dell'animazione di spinner ma l'animazione CSS moderna lo rende anche piuttosto semplice.
Per risparmiare tempo costruendo da zero, è possibile utilizzare una libreria come CSSPIN con tonnellate di filatori personalizzati predefiniti. Tutte queste animazioni sono libere di clonare e totalmente open-source, così hai accesso completo per modificare il codice come desideri.
Impostare uno spinner con questa libreria è un gioco da ragazzi. Hai appena copia la libreria CSS nella tua pagina, quindi aggiungi gli elementi HTML personalizzati ovunque tu voglia che appaiano.
Utilizzare solo questi spinners personalizzati un elemento HTML per creare l'effetto di animazione. Questo è enorme perché è l'effetto grafico e l'animazione reso puramente attraverso le classi CSS.
E, dato che puoi accedere al codice sorgente, puoi farlo sostituisci forme, colori, dimensioni e velocità di animazione per adattarsi meglio ai tuoi progetti.
Prendi nota del codice usa la sintassi LESS, quindi avrai bisogno di familiarizzare con quel linguaggio di pre-elaborazione per apportare eventuali modifiche importanti.
Ma puoi trovare molto semplici esempi CSS sulla pagina demo principale, insieme a semplici istruzioni sulla pagina GitHub.
Se hai familiarità con npm o pergolato questi sono metodi alternativi per l'installazione della libreria.
Non importa come viene installato, questa è una fantastica libreria di animazioni CSS con cui lavorare. È pensato per essere completamente modulare con tanto spazio per nuovi filatori, nuove animazioni e personalizzazioni da altri sviluppatori.
Per saperne di più e sfogliare tutta la documentazione, controlla il Repository CSSPIN su GitHub. Anche il creatore ha fatto un piccolo configurazione video che puoi guardare qui sotto.
