🔧

Générateur de skeleton loader

Générateurs & Design · Outil en ligne gratuit

Générer le CSS d'animation de chargement d'écran squelette.

Équipe CoderNewbieDernière mise à jour : 2026-09-20

Fonctionnalités

Shape

Largeur100%

Height16px

Shimmer duration1.5s

Base

Highlight

Aperçu

Code CSS

.skeleton {
  width: 100%;
  height: 16px;
  border-radius: 4px;
  background-color: #1e293b;
  background-image: linear-gradient(
    90deg,
    #1e293b 0%,
    #334155 50%,
    #1e293b 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s linear infinite;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

3 formes

Barres de texte, rectangles et cercles pour n'importe quel placeholder d'UI.

Animation scintillante

Scintillement linear-gradient avec vitesse ajustable via @keyframes.

Couleurs de marque

Définissez les couleurs de base et de surbrillance pour correspondre à votre thème.

Comment utiliser Générateur de skeleton loader

1Configure the generator settings (colors, size, format, etc.).
2Enter any required input text or data.
3Click generate to create the output.
4Download or copy the generated result.

Fonctionnalités

✓100% gratuit — sans inscription, sans abonnement, sans publicité
✓Fonctionne entièrement dans votre navigateur — vos données ne quittent jamais votre appareil
✓Rapide et léger — résultats instantanés
✓Multiplateforme — compatible ordinateur, tablette et mobile