Morphing Shape
50 × 50 px, dégradé #6366f1 → #d946ef, quatre formes en boucle de 2 s : cercle, carré, deux feuilles diagonales opposées — chaque état pivote d'un quart de tour. Pur CSS, zéro JavaScript.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Chargement comprend 29 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Un seul div.loader-morph de 50 × 50 px, coloré par linear-gradient(135deg, #6366f1, #d946ef) (indigo vers violet rosé), reçoit l'animation morphLoader en 2s ease-in-out infinite. Aucun JavaScript, aucun élément supplémentaire, aucun pseudo-élément.
L'animation @keyframes morphLoader définit quatre états : cercle à 0 %/100 % (border-radius: 50%, rotate(0deg)) ; carré à 25 % (border-radius: 0, rotate(90deg)) ; feuille diagonale A à 50 % (border-radius: 50% 0 — coins TL et BR arrondis à 50 %, TR et BL à 0 —, rotate(180deg)) ; feuille diagonale B à 75 % (border-radius: 0 50% — TR et BL arrondis à 50 %, TL et BR à 0 —, rotate(270deg)). Chaque étape de forme coïncide avec un quart de tour exact : le carré à 90° apparaît aligné avec les axes, sans inclinaison parasite. Le timing ease-in-out marque une courte pause à chaque forme avant la déformation suivante.
Accessibilité
- prefers-reduced-motion absent du code : l'animation tourne en continu quelle que soit la préférence de l'utilisateur. Ajoutez dans votre CSS :
@media (prefers-reduced-motion: reduce) { .loader-morph { animation: none; border-radius: 50%; } }— l'élément reste visible comme un disque coloré statique. - Rôle d'indicateur de chargement non déclaré : le code ne contient ni
role="status", niaria-busy, niaria-live, ni texte alternatif. Enveloppez ledivdans un conteneurrole="status" aria-live="polite" aria-label="Chargement en cours"(ou posezaria-busy="true"sur l'élément qu'il couvre) pour que les lecteurs d'écran annoncent le début et la fin du chargement. - Contraste : #6366f1 sur fond sombre #0a0a0f mesure 4,4:1 et #d946ef mesure 3,7:1 — tous deux au-dessus du seuil de 3:1 pour les éléments graphiques (WCAG 1.4.11). Sur un fond clair, les deux couleurs passent sous 3:1 ; adaptez le gradient ou ajoutez un fond sombre au conteneur.
- Élément non focalisable : le
divn'est pas interactif et ne reçoit pas le focus clavier. Aucun libellé n'est nécessaire sur lui ; c'est le conteneur portantrole="status"qui porte le nom accessible.
Compatibilité navigateur
Requiert @keyframes, border-radius en pourcentage, transform: rotate() et linear-gradient non préfixés. Zéro dépendance.
Sans animation (navigateurs anciens), l'élément est un carré fixe de 50 × 50 px avec le dégradé indigo-violet. Sans linear-gradient (IE 8 et antérieurs), l'élément est un carré vide sans fond visible.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="loader-morph"></div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Taille (CSS — width et height) |
50px | Les deux valeurs sont couplées pour garder un carré. De 20 à 24 px il entre dans un bouton de 44 px ; à 80 px il convient à un grand indicateur de page. |
Couleurs du dégradé (CSS — linear-gradient(135deg, #6366f1, #d946ef)) |
#6366f1 → #d946ef | Remplacez les deux valeurs hex. Un dégradé blanc translucide convient à un bouton sombre ; une couleur plate (#6366f1, #6366f1) supprime le dégradé. |
Durée (CSS — animation-duration dans .loader-morph) |
2s | 1 s = rythme vif pour les attentes courtes (< 500 ms) ; 3 s = allure posée pour une génération longue. |
Timing (CSS — animation-timing-function dans .loader-morph) |
ease-in-out | ease-in-out marque chaque forme d'une courte pause. linear donne un mouvement continu et uniforme, plus mécanique. |
Forme carrée (CSS — border-radius: 0 à 25 %) |
0 (angles vifs) | Remplacez par 4px pour un carré à coins légèrement arrondis, intermédiaire perceptible entre le cercle et le carré strict. |
Formes intermédiaires (CSS — 50% 0 à 50 %, 0 50% à 75 %) |
TL+BR arrondis puis TR+BL arrondis | Remplacez 50% 0 par 50% 10% pour adoucir les coins vifs des feuilles diagonales. 30% 0 donne des demi-feuilles moins prononcées. |
| prefers-reduced-motion (CSS — à ajouter) | absent du code | Ajoutez @media (prefers-reduced-motion: reduce) { .loader-morph { animation: none; border-radius: 50%; } } pour immobiliser l'indicateur sur les systèmes qui le demandent. |
FAQ
border-radius sur une carte interactive de taille variable — sans rotation, avec un clic pour étendre et du JavaScript. fx-0431 est un indicateur de chargement de 50 × 50 px piloté par une animation CSS à quatre états qui coordonnent simultanément border-radius et rotate(), sans aucun JavaScript ni interaction. Contexte (carte vs. loader), échelle et mécanique sont différents.rotate(45deg) à 25 % — le carré devient un losange et les feuilles diagonales apparaissent biaisées.@media (prefers-reduced-motion: reduce) { .loader-morph { animation: none; border-radius: 50%; } }. L'élément reste visible comme un disque coloré fixe — présence confirmée sans mouvement.
