🔧

Generador de Skeleton Loader

Generadores y Diseño · Herramienta online gratuita

Generar CSS de animación de carga de skeleton screen.

Equipo CoderNewbieÚltima actualización: 2026-09-20

Características

Shape

Ancho100%

Height16px

Shimmer duration1.5s

Base

Highlight

Vista previa

Código 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 formas

Barras de texto, rectángulos y círculos para cualquier marcador de UI.

Animación shimmer

Shimmer de linear-gradient con velocidad ajustable vía @keyframes.

Colores de marca

Configura colores base y de resaltado para ajustar a tu tema.

Cómo usar Generador 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.

Características

✓100% gratis — sin registro, sin suscripción, sin anuncios
✓Funciona íntegramente en tu navegador — los datos nunca salen de tu dispositivo
✓Rápida y ligera — resultados instantáneos
✓Multiplataforma — funciona en escritorio, tableta y móvil