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 :

3_barres

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é 🙂

cercle_loader

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

carre_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 🙂

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*