Exemples de loaders CSS3

Dans cet article je vais vous montrer 3 exemples de loader (animation de chargement) réalisé en CSS3.

Voir les 3 exemples en démo

Les 3 barres

Le premier loader que l’on va réaliser est celui composé des fameuses 3 barres qui a été popularisé (inventé ?) par Facebook :

Commençons par la strucutre HTML :

<div class="loader">

    <div class="bar bar1"></div>

    <div class="bar bar2"></div>

    <div class="bar bar3"></div>

    <div class="text">Veuillez patentier...</div>

</div>

Et le CSS de base :

body {
	background: #000;
	font-family: Arial;
}

.loader {
	width: 280px;
	margin-left: auto;
	margin-right: auto;
	color: #fc0;
	text-align: center;
}

.loader div.bar {
	width: 10px;
	height: 30px;
	background-color: #fc0;
	display: inline-block;
}

.loader div.text {
	display: block;
	font-size: 26px;
}

Et enfin la partie qui nous intéresse le plus, l’animation CSS3 :

.loader div.bar1{
	animation: bar_anim 1s linear infinite;
}
.loader div.bar2 {
	animation: bar_anim 1s linear -0.25s infinite;
}
.loader div.bar3 {
	animation: bar_anim 1s linear -0.5s infinite;
}
@keyframes bar_anim {
	0%{
		transform: scaleY(0);
		opacity: 1;
	}
	50%{
		transform: scaleY(1);
		opacity: 0.4;
	}
	100%{
		transform: scaleY(0);
		opacity: 1;
	}
}

On applique donc sur nos 3 barres un redimensionnement sur l’axe des Y et on change leurs opacités. Vous remarquez les décalages dans le temps des animations des barres 2 et 3 (-0.25s et -0.5s) pour désynchroniser le tout.

Le cercle tournant

C’est mon préféré 🙂

Le HTML

<div class="loader2">
     <div class="round"></div>
     <div class="text">Chargement en cours...</div>
</div>

Le CSS avec l’animation :

body {
	background: #000;
	font-family: Arial;
}

.loader2 {
	margin: 50px auto 0px auto;
	width: 200px;
}

.loader2 .round {
	margin: 0px auto 0px auto;
	color: #fc0;
	text-align: center;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	border-top: 5px solid #ccc;
	border-right: 5px solid #ccc;
	animation: round 2s linear infinite;
}

.loader2 .text {
	margin-top: 15px;
	color: #ccc;
	font-size: 18px;
}

@keyframes round {
	0%{
		transform: rotate(0deg);
		opacity: 1;
	}
	50%{
		transform: rotate(180deg);
		opacity: 0.4;
	}
	100%{
		transform: rotate(360deg);
		opacity: 1;
	}
}

On utilise un border-radius de 50% pour faire notre cercle et border-top et border-right pour faire apparaitre un bout du pourtour blanc. Ensuite il ne reste qu’à le faire tourner avec du transform: rotate

Le carré tournant

Pour ce dernier loader c’est le même principe que pour le cercle tournant sauf que l’on va lui changer sa couleur en même temps qu’il tourne.

Le HTML :

<div class="loader3">
      <div class="square"></div>
      <div class="text">Un instant...</div>
</div>

Et le CSS :

.loader3 {
	margin: 50px auto 0px auto;
	width: 200px;
}

.loader3 .square {
	width: 20px;
	height: 20px;
	background-color: #f00;
	padding: 20px;
	border-radius: 5px;
	animation: square 2s linear infinite;
	text-align: center;
	margin: 0px auto 0px auto;
}

.loader3 .text {
	font-size: 20px;
	color: #f00;
	text-align: center;
	margin-top: 20px;
	animation: loader3_text 2s linear infinite;
}

@keyframes square {
	0%{
		transform: rotate(0deg);
	}
	50%{
		transform: rotate(180deg);
		background: #00f;
	}
	100%{
		transform: rotate(360deg);
		background: #f00;
	}
}

@keyframes loader3_text {
	50%{
		color: #00f;
	}
	100%{
		color: #f00;
	}
}

On change donc la couleur du rouge vers le bleu pour le carré et le texte en dessous pendant l’animation.

Voila c’est terminé pour ces 3 exemples. Maintenant à vous de créer vos propres loaders 🙂