Generador de Cargadores CSS - Animaciones de Spinner, Puntos, Barras y Pulso Gratis

Genere animaciones de carga CSS puras incluyendo spinner, puntos, barras, pulso y anillo. Personalice tamaño, color y velocidad, luego copie el código completo

Herramientas CSS

Tool

Loader Style

Size (40px)Color

#6366f1

Speed (1s)

HTML + CSS

<style>
.loader-_R_hbqav5ubqiudb_ {
  width: 40px;
  height: 40px;
  border: 4px solid #6366f140;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: loader-_R_hbqav5ubqiudb_-spin 1s linear infinite;
}
@keyframes loader-_R_hbqav5ubqiudb_-spin {
  to { transform: rotate(360deg); }
}
</style>

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

Cómo usar

1Haga clic en un preajuste de cargador: spinner, puntos, barras, pulso o anillo
2Ajuste el tamaño (20–80px), el color y la velocidad de animación
3Previsualice la animación del cargador en vivo
4Copie el código HTML y CSS completo incluyendo @keyframes y péguelo en su proyecto

Preguntas frecuentes

Sí. Todos los cargadores están implementados con CSS puro utilizando animaciones @keyframes. No se requiere JavaScript ni bibliotecas externas.

Sí. Use el selector de color para establecer cualquier color. El CSS generado utiliza ese valor de color exacto en las propiedades relevantes (border-color, background-color, etc.).

El control deslizante de velocidad ajusta la animation-duration de los @keyframes. Los valores más bajos (por ejemplo, 0.3s) crean animaciones más rápidas; los valores más altos (por ejemplo, 3s) crean animaciones más lentas.

Copie la estructura HTML generada y el CSS acompañante (incluyendo @keyframes). Pegue el CSS en su hoja de estilos y el HTML donde desee que aparezca el cargador.

<style> .loader-_R_hbqav5ubqiudb_ { width: 40px; height: 40px; border: 4px solid #6366f140; border-top-color: #6366f1; border-radius: 50%; animation: loader-_R_hbqav5ubqiudb_-spin 1s linear infinite; } @keyframes loader-_R_hbqav5ubqiudb_-spin { to { transform: rotate(360deg); } } </style> <div class="loader-_R_hbqav5ubqiudb_"></div>

Preguntas frecuentes

Sí. Todos los cargadores están implementados con CSS puro utilizando animaciones @keyframes. No se requiere JavaScript ni bibliotecas externas.

Sí. Use el selector de color para establecer cualquier color. El CSS generado utiliza ese valor de color exacto en las propiedades relevantes (border-color, background-color, etc.).

Copie la estructura HTML generada y el CSS acompañante (incluyendo @keyframes). Pegue el CSS en su hoja de estilos y el HTML donde desee que aparezca el cargador.