Categoria:

Icona di caricamento in CSS3

06/01/2014 07:03 Pubblicato da
Share on FacebookTweet about this on TwitterGoogle+Share on Reddit

Icona di caricamento - CSS

Tramite la proprietà animation di CSS 3 è possibile creare icone di caricamento dinamiche senza il bisogno di dover sfruttare JavaScript. In questa guida verrà mostrato come creare una semplice icona dinamica composta da 3 circonferenze.

Demo Download

Innanzitutto, definiamo la struttura della nostra icona di caricamento: la classe .spin contiene tutti gli elementi della nostra animazione, mentre le classi .ext, .mid e .int sono le circonferenze che dovranno ruotare all’infinito.

Lo .spin rappresenta il wrapper più esterno posizionato relativamente alla sua normale posizione.

La classe .ext rappresenta il box più esterno. Pertanto la dimensione di questo box sarà superiore ai box contenuti. Impostando il border-radius al 50% otteniamo una circonferenza. Dichiarando il bordo superiore, quello di destra e quello di sinistra trasparenti otterremmo solo un quarto della circonferenza. Infine definiamo l’animazione che dovrà essere eseguita. In particolare il nome dell’animazione è spin, ha una durata di 5 secondi, si ripete all’infinito, ha un’animation-direction normale (può essere di tipo reverse per eseguire l’animazione al contrario o alternate per ruotare la circonferenza in modo alternato) e una animation-timing-function lineare (potrebbe essere anche ease, cubic-bezier, ease-in etc.).

Molto simile all’elemento precedente. Si tratta della circonferenza intermedia.

La circonferenza più interna è molto simile alle precedenti.

Ognuna delle tre circonferenze fanno riferimento agli stessi @keyframes che consentono la rotazione delle circonferenze da 0 a 360 gradi (o al contrario, in base dal valore dell’animation-direction.

Demo Download

21/07/2017 10:14

Leave a Reply

Your email address will not be published. Required fields are marked *