Introduction
Les loaders sont essentiels pour une bonne experience utilisateur. Ils indiquent que quelque chose se passe en arriere-plan et maintiennent l'engagement de l'utilisateur pendant les temps de chargement.
Dans ce tutoriel, nous allons explorer 5 types de loaders que vous pouvez creer uniquement avec CSS, sans aucune dependance JavaScript. Chaque exemple est fonctionnel et pret a etre utilise dans vos projets.
Les loaders CSS sont plus performants car ils sont geres par le GPU. Ils fonctionnent meme si JavaScript est desactive et ne bloquent pas le thread principal.
1. Spinner classique anime
Le spinner est le loader le plus reconnaissable. Simple mais efficace, il utilise une bordure partielle et une rotation continue pour creer l'illusion de chargement.
/* Spinner basique */
.spinner {
width: 48px;
height: 48px;
border: 4px solid rgba(99, 102, 241, 0.2);
border-top-color: #6366f1;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Spinner double bordure */
.spinner-dual {
width: 48px;
height: 48px;
border: 4px solid transparent;
border-top-color: #6366f1;
border-bottom-color: #8b5cf6;
border-radius: 50%;
animation: spin 1s linear infinite;
}
/* Spinner avec gradient (technique avancee) */
.spinner-gradient {
width: 48px;
height: 48px;
border-radius: 50%;
background: conic-gradient(
from 0deg, transparent, #6366f1
);
mask: radial-gradient(
farthest-side,
transparent calc(100% - 4px),
black calc(100% - 4px)
);
animation: spin 1s linear infinite;
}Personnalisation
- Taille : Modifiez
widthetheight - Epaisseur : Ajustez la valeur de
border - Vitesse : Changez la duree de l'animation (ex:
0.5spour plus rapide)
2. Dots loader (rebond)
Le loader a points est parfait pour un style plus ludique. Les points rebondissent avec un leger decalage temporel, creant un effet de vague hypnotique.
/* Conteneur des dots */
.dots-loader {
display: flex;
gap: 8px;
}
/* Style des points */
.dots-loader .dot {
width: 12px;
height: 12px;
background: #6366f1;
border-radius: 50%;
animation: bounce 1.4s ease-in-out infinite both;
}
/* Decalage temporel pour chaque point */
.dots-loader .dot:nth-child(1) { animation-delay: -0.32s; }
.dots-loader .dot:nth-child(2) { animation-delay: -0.16s; }
.dots-loader .dot:nth-child(3) { animation-delay: 0s; }
@keyframes bounce {
0%, 80%, 100% {
transform: scale(0.6);
opacity: 0.5;
}
40% {
transform: scale(1);
opacity: 1;
}
}
/* Variante : Barres en vague */
.dots-wave {
display: flex;
gap: 6px;
align-items: flex-end;
height: 40px;
}
.dots-wave .bar {
width: 8px;
background: #6366f1;
border-radius: 4px;
animation: wave 1.2s ease-in-out infinite;
}
@keyframes wave {
0%, 100% { height: 10px; }
50% { height: 40px; }
}3. Skeleton loader avec shimmer
Le skeleton loader est ideal pour les contenus qui prennent du temps a charger. Il affiche une silhouette du contenu final avec un effet de brillance qui traverse l'element.
/* Base du skeleton avec effet shimmer */
.skeleton {
background: linear-gradient(
90deg,
#1a1a25 25%,
#252532 50%,
#1a1a25 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 8px;
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
/* Elements du skeleton */
.skeleton-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
}
.skeleton-title {
height: 20px;
width: 70%;
margin-bottom: 12px;
}
.skeleton-text {
height: 14px;
width: 100%;
margin-bottom: 8px;
}
.skeleton-text:last-child {
width: 80%;
}Creez vos skeletons pour qu'ils correspondent exactement a la mise en page finale. Cela reduit le "layout shift" et ameliore les Core Web Vitals.
4. Progress bar animee
Les barres de progression sont parfaites quand vous connaissez l'avancement ou pour montrer une activite continue. Voici trois styles differents.
/* Progress bar animee */
.progress-bar {
height: 8px;
background: rgba(99, 102, 241, 0.2);
border-radius: 4px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
border-radius: 4px;
animation: progress 2s ease-in-out infinite;
}
@keyframes progress {
0% { width: 0%; }
50% { width: 100%; }
100% { width: 0%; }
}
/* Progress indeterminee */
.progress-indeterminate {
height: 8px;
background: rgba(99, 102, 241, 0.2);
border-radius: 4px;
overflow: hidden;
position: relative;
}
.progress-indeterminate::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 40%;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
border-radius: 4px;
animation: indeterminate 1.5s ease-in-out infinite;
}
@keyframes indeterminate {
0% { left: -40%; }
100% { left: 100%; }
}
/* Progress rayee animee */
.progress-striped-fill {
background: repeating-linear-gradient(
45deg,
#6366f1,
#6366f1 10px,
#8b5cf6 10px,
#8b5cf6 20px
);
background-size: 28.28px 100%;
animation: stripes 1s linear infinite;
}
@keyframes stripes {
0% { background-position: 0 0; }
100% { background-position: 28.28px 0; }
}5. Loader circulaire avec pourcentage
Le loader circulaire avec pourcentage est parfait pour les uploads ou les processus longs. Il combine SVG et CSS pour un resultat elegant et informatif.
<!-- Structure HTML -->
<div class="circular-progress">
<svg width="100" height="100" viewBox="0 0 100 100">
<circle class="bg" cx="50" cy="50" r="45"/>
<circle class="progress" cx="50" cy="50" r="45"/>
</svg>
<span class="percentage">75%</span>
</div>.circular-progress {
position: relative;
width: 100px;
height: 100px;
}
.circular-progress svg {
transform: rotate(-90deg);
}
.circular-progress circle {
fill: none;
stroke-width: 8;
stroke-linecap: round;
}
.circular-progress .bg {
stroke: rgba(99, 102, 241, 0.2);
}
.circular-progress .progress {
stroke: #6366f1;
/* Circonference = 2 * PI * r = 2 * 3.14159 * 45 = 283 */
stroke-dasharray: 283;
/* Pour 75%: 283 - (283 * 0.75) = 70.75 */
stroke-dashoffset: 70.75;
transition: stroke-dashoffset 0.5s ease;
}
.circular-progress .percentage {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.25rem;
font-weight: 700;
}
/* Animation en boucle */
@keyframes circularProgress {
0% { stroke-dashoffset: 283; }
50% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 283; }
}Bonnes pratiques et accessibilite
Creer des loaders esthetiques c'est bien, mais les rendre accessibles c'est mieux. Voici les points essentiels a respecter.
Performance
- Preferez
transformetopacitypour les animations (GPU accelere) - Evitez d'animer
width,heightoumargin(declenchent un reflow) - Utilisez
will-changeavec parcimonie pour les animations complexes
Accessibilite
- Ajoutez
role="status"au conteneur du loader - Utilisez
aria-labelpour decrire l'action en cours - Respectez
prefers-reduced-motionpour les utilisateurs sensibles
/* Respecter les preferences utilisateur */
@media (prefers-reduced-motion: reduce) {
.spinner,
.dots-loader .dot,
.skeleton,
.progress-fill,
.circular-progress .progress {
animation: none;
}
/* Alternative statique pour le spinner */
.spinner {
border-color: #6366f1;
opacity: 0.7;
}
}
/* HTML accessible */
<!-- Exemple -->
<div role="status" aria-label="Chargement en cours">
<div class="spinner"></div>
<span class="sr-only">Chargement...</span>
</div>
/* Texte visible uniquement pour les lecteurs d'ecran */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}Les animations en boucle peuvent etre problematiques pour les personnes epileptiques ou ayant des troubles vestibulaires. Toujours proposer une alternative avec prefers-reduced-motion.
Conclusion
Vous disposez maintenant de 5 types de loaders CSS modernes et performants. Ces composants sont legers, accessibles et entierement personnalisables selon votre charte graphique.
N'hesitez pas a combiner ces techniques et a experimenter avec les couleurs, les timings et les easings pour creer des loaders uniques qui correspondent parfaitement a votre marque.
Retrouvez plus de 50 loaders prets a l'emploi dans notre bibliotheque de loaders, avec code copiable en un clic et customizer integre.