Andrea Verlicchi
🇬🇧 English

Rendo il web più veloce e più usabile

Animazione di caricamento "loading" rotante in solo CSS 3

Abbiamo usato immagini GIF per creare animazioni per anni, ma non sono adatte ad essere utilizzate sopra sfumature o immagini (niente canale alfa, niente anti-aliasing) di cui i siti web moderni sono pieni. Esistono molte soluzioni alternative per animare invece immagini PNG, ma...

Voglio mostrarti una soluzione che ho trovato per creare un'animazione di caricamento ("loading") da zero, utilizzando solo CSS 3, senza immagini.

Prima i risultati #

Vedi la Pen CSS 3 only spinning circle quarter - loading animation di Andrea Verlicchi (@verlok) su CodePen.

Cosa succede qui #

Il fulcro di questo metodo consiste nel disegnare un quarto di cerchio e animarlo. Continua a leggere per scoprire i passaggi passo-passo per farlo.

1. Creare un cerchio #

<!-- Cerchio interno mascherato -->
<div class="maskedCircle"></div>
/* Cerchio rotante (cerchio interno) */
.loading .maskedCircle {
	width: 20px;
	height: 20px;
	border-radius: 12px;
	border: 3px solid white;
}

2. Mascherare un quarto del cerchio #

<!-- Maschera del quarto di cerchio -->
<div class="mask">
    <!-- Cerchio interno mascherato -->
    <div class="maskedCircle"></div>
</div>
/* Maschera del cerchio rotante */
.loading .mask {
	width: 12px;
	height: 12px;
	overflow: hidden;
}

3. Far ruotare entrambi #

<!-- Facciamo ruotare questo div -->
<div class="spinner">
	<!-- Maschera del quarto di cerchio -->
	<div class="mask">
		<!-- Cerchio interno mascherato -->
		<div class="maskedCircle"></div>
	</div>
</div>
/* Keyframe dell'animazione */
@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* Spinner */
.loading .spinner {
	position: absolute;
	left: 1px;
	top: 1px;
	width: 26px;
	height: 26px;
	animation: spin 1s infinite linear;
}

4. Avvolgere tutto in un contenitore "loading", che sarà centrato rispetto al suo genitore #

<!-- Contenitore dell'animazione di caricamento -->
<div class="loading">
	<!-- Facciamo ruotare questo div -->
	<div class="spinner">
		<!-- Maschera del quarto di cerchio -->
		<div class="mask">
			<!-- Cerchio interno mascherato -->
			<div class="maskedCircle"></div>
		</div>
	</div>
</div>
/* Contenitore dell'animazione di caricamento */
.loading {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 28px;
	height: 28px;
	margin: -14px 0 0 -14px;
}

Codice HTML e CSS risultante: #

<!-- Contenitore dell'animazione di caricamento -->
<div class="loading">
	<!-- Facciamo ruotare questo div -->
	<div class="spinner">
		<!-- Maschera del quarto di cerchio -->
		<div class="mask">
			<!-- Cerchio interno mascherato -->
			<div class="maskedCircle"></div>
		</div>
	</div>
</div>
/* Keyframe dell'animazione - devi aggiungere i prefissi */
@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* Contenitore dell'animazione di caricamento */
.loading {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 28px;
	height: 28px;
	margin: -14px 0 0 -14px;
}

/* Cerchio rotante (cerchio interno) */
.loading .maskedCircle {
	width: 20px;
	height: 20px;
	border-radius: 12px;
	border: 3px solid white;
}

/* Maschera del cerchio rotante */
.loading .mask {
	width: 12px;
	height: 12px;
	overflow: hidden;
}

/* Spinner */
.loading .spinner {
	position: absolute;
	left: 1px;
	top: 1px;
	width: 26px;
	height: 26px;
	animation: spin 1s infinite linear;
}

Non è fantastico?

Funziona perfettamente su tutti i browser desktop come:

e anche per tutti i principali browser mobile:

Al momento, Internet Explorer su Windows Phone 7 non animerà la figura.

I fallback? #

Hai bisogno di un fallback per vedere l'animazione nei browser più vecchi? Se hai letto fin qui, probabilmente sì.

Sebbene il fallback non sia lo scopo di questo articolo, diciamo che la soluzione migliore sarebbe preparare uno sprite con tutti i fotogrammi (frame) dell'animazione a una distanza costante l'uno dall'altro, usare lo sprite come sfondo di un elemento DOM e animare lo sfondo con Javascript.