5 loader CSS modernes sans JavaScript – Code complet

Vous avez déjà cliqué sur un bouton… puis attendu quelques secondes sans savoir si le site faisait quelque chose ? C’est frustrant ! C’est exactement là qu’intervient le loader. Un petit élément visuel, souvent discret, qui rassure l’utilisateur pendant qu’un contenu se charge.

• Maîtriser les bases des animations CSS pour créer des loaders fluides et professionnels sans JavaScript.
• Disposer de plusieurs styles de loaders modernes et personnalisables pour enrichir l’expérience utilisateur de vos projets web.
• Comprendre les bonnes pratiques design et accessibilité afin d’intégrer un loader adapté à tous les utilisateurs.

Dans ce tutoriel, vous allez apprendre à créer 5 exemples de loader CSS, sans JavaScript, uniquement avec du HTML et du CSS. Oui, du CSS pur. Et surtout, vous allez comprendre comment ça fonctionne, même si vous débutez complètement en développement web. Ouvrez votre éditeur de code, on démarre tout de suite.

Qu’est-ce qu’un loader CSS ?

Un loader CSS est une animation qui indique qu’un contenu est en cours de chargement. On l’appelle aussi indicateur de progression ou animation de chargement.

Concrètement, il peut s’agir :

• d’un cercle qui tourne,
• de points qui rebondissent,
• d’une barre qui progresse,
• ou d’une animation plus créative.

L’objectif est simple : éviter le vide. Un écran blanc donne l’impression que le site est bloqué. Un loader rassure votre visiteur.

Et bonne nouvelle : le CSS permet aujourd’hui de créer des animations très fluides grâce à la règle @keyframes.

Les bases avant de commencer

Avant de créer nos 5 loaders CSS, vous devez comprendre deux notions essentielles :

La propriété animation

Elle permet d’appliquer une animation à un élément.

.loader {
  animation: rotation 1s linear infinite;
}

Cela signifie :

• rotation → nom de l’animation
• 1s → durée
• linear → vitesse constante
• infinite → répété à l’infini

👉 En savoir plus sur La propriété animation en CSS

La règle @keyframes

Elle définit les étapes de l’animation.

@keyframes rotation {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

Ici, on fait tourner un élément de 0 à 360 degrés. C’est le cœur d’un loader CSS.

👉 En savoir plus sur La propriété keyframes en CSS

Loader CSS N°1 : Le cercle qui tourne, le grand classique

On commence par le plus célèbre : le spinner circulaire. Simple, élégant, efficace.

HTML

<div class="loader"></div>

CSS

.loader {
  width: 50px;
  height: 50px;
  border: 5px solid #e5e5e5;
  border-top: 5px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 100px auto;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

• On crée un carré de 50px sur 50px.
• Ensuite, on applique une bordure grise sur tout le contour.

Attention : on change uniquement la bordure du haut (border-top) en bleu. Résultat ? On obtient un cercle avec une partie colorée.

• Quand on applique la rotation, seule la partie bleue est visible en mouvement. Cela donne l’impression d’un cercle qui tourne.

C’est un loader CSS minimaliste, parfait pour un site moderne.

Astuce design : changez la couleur #3b82f6 pour l’adapter à votre charte graphique.

Loader CSS N°2 : Les trois points rebondissants

Un peu plus vivant. Très utilisé sur les interfaces de messagerie.

HTML

<div class="dots">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

.dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 100px;
}

.dots div {
  width: 15px;
  height: 15px;
  background-color: #3b82f6;
  border-radius: 50%;
  animation: bounce 0.6s infinite alternate;
}

.dots div:nth-child(2) {
  animation-delay: 0.2s;
}

.dots div:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes bounce {
  to {
    transform: translateY(-15px);
  }
}

Ce qu’il se passe réellement

• On aligne trois cercles avec display: flex.
• Ensuite, on applique une animation de translation verticale.
• Les points montent et redescendent.

Grâce à animation-delay, chaque point démarre légèrement après le précédent. Résultat : un effet de vague fluide.

C’est un loader CSS très apprécié pour son côté humain et dynamique.

Loader CSS N°3 : La barre de progression animée

Ici, on simule une progression.

HTML

<div class="progress">
  <div class="progress-bar"></div>
</div>

CSS

.progress {
  width: 300px;
  height: 8px;
  background-color: #e5e5e5;
  border-radius: 4px;
  overflow: hidden;
  margin: 100px auto;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background-color: #3b82f6;
  animation: loading 2s infinite;
}

@keyframes loading {
  0% { width: 0%; }
  50% { width: 100%; }
  100% { width: 0%; }
}

Comprendre la logique de l’animation de ce loader

• La div .progress est le conteneur.
• La div .progress-bar est la partie animée.

On anime la largeur (width).

• Elle passe de 0% à 100%, puis revient à 0%.

Cela donne une impression de chargement continu.

Ce type de loader CSS est idéal pour des tableaux, dashboards ou interfaces professionnelles.

Loader CSS N°4 : Le cercle pulsant

Plus moderne. Plus doux. Parfait pour un design épuré.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

HTML

<div class="pulse"></div>

CSS

.pulse {
  width: 40px;
  height: 40px;
  background-color: #3b82f6;
  border-radius: 50%;
  margin: 100px auto;
  animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

Pourquoi ça fonctionne si bien ?

On joue sur deux propriétés :

• transform: scale()
• opacity

Le cercle grandit puis rétrécit. Il devient légèrement transparent au milieu.

• C’est simple… mais visuellement très élégant.

Ce loader CSS donne une sensation de respiration.

Loader CSS N°5 : Le loader double anneau

On monte d’un niveau.

HTML

<div class="double-ring"></div>

CSS

.double-ring {
  width: 60px;
  height: 60px;
  border: 6px solid transparent;
  border-top: 6px solid #3b82f6;
  border-bottom: 6px solid #10b981;
  border-radius: 50%;
  animation: rotate 1s linear infinite;
  margin: 100px auto;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

Ce qui change ici

On utilise deux couleurs différentes : une en haut, une en bas.

En rotation, cela donne un effet plus sophistiqué qu’un simple spinner.

C’est un loader CSS parfait pour une application web plus “tech”.

Loader N°6 en CSS pure, le bonus !

Loader inspiré du design d’Apple. Simple et élégant :

<div class="loader-container">
  <div class="apple-loader">
    <div class="spinner"></div>
    <div class="glass-morph"></div>
  </div>
  <p>Chargement...</p>
</div>

:root {
  --bg-color: #f5f5f7;
  --loader-size: 60px;
  --accent-color: #0071e3; /* Bleu Apple standard */
}

.loader-container {
  text-align: center;
}

.loader-container p {
  margin-top: 20px;
  color: #86868b;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Structure principale */
.apple-loader {
  position: relative;
  width: var(--loader-size);
  height: var(--loader-size);
  margin: 0 auto;
}

/* L'anneau animé */
.spinner {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    transparent 20%,
    var(--accent-color) 100%
  );
  mask: radial-gradient(farthest-side, transparent 80%, black 81%);
  -webkit-mask: radial-gradient(farthest-side, transparent 80%, black 81%);
  animation: spin 0.8s linear infinite;
}

/* Effet de lueur douce en fond */
.glass-morph {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 50%;
  z-index: -1;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

• Conic-gradient : Il crée cette traînée lumineuse douce qui s’efface progressivement, typique des interfaces iOS/macOS.
• Masquage radial : Le cercle n’est pas un simple « border », il est découpé avec précision pour un rendu plus net.
• Fluidité : Le timing de 0.8s offre une rotation rapide mais organique.
• Sobriété : L’utilisation de la police système et de la couleur #86868b pour le texte respecte les codes typographiques d’Apple.

Comment intégrer un loader dans un vrai projet ?

Même si ici nous n’utilisons pas JavaScript, dans un projet réel, le loader est souvent :

• affiché au chargement de la page
• masqué quand les données sont prêtes
• utilisé lors d’un appel API

En CSS pur, vous pouvez déjà le placer en position fixe :

.loader {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Cela centre parfaitement votre animation.

Les bonnes pratiques pour un loader CSS

Un loader ne doit jamais être envahissant.

Évitez :

• les couleurs trop agressives
• les animations trop rapides
• les effets qui clignotent fortement

Pensez aussi à l’accessibilité. Certaines personnes sont sensibles aux animations.

Vous pouvez prévoir :

@media (prefers-reduced-motion: reduce) {
  .loader {
    animation: none;
  }
}

C’est un petit détail… mais cela montre votre professionnalisme.

Pourquoi utiliser un loader CSS plutôt que JavaScript ?

Excellente question. Le CSS pur présente plusieurs avantages :

1. Il est léger.
2. Il ne dépend d’aucune bibliothèque.
3. Il est performant.
4. Il est simple à maintenir.

Pour un simple indicateur visuel, inutile de charger un script.

Et honnêtement… créer un loader CSS soi-même, c’est toujours satisfaisant.

---

Vous venez de découvrir 5 façons différentes de créer un loader CSS moderne sans JavaScript. Du spinner classique au cercle pulsant, en passant par la barre animée, vous avez maintenant toutes les bases pour intégrer un loader élégant dans vos projets.

Mais au-delà du code, retenez ceci : un loader n’est pas juste une animation. C’est une promesse silencieuse faite à l’utilisateur. Il lui dit : “Patientez, quelque chose arrive.”

Et c’est exactement ce genre de détail qui transforme un site ordinaire en expérience professionnelle. À vous maintenant de tester, modifier, personnaliser… et pourquoi pas créer votre propre loader CSS unique.