Generador de spinner de carga CSS
Elige un spinner de anillo, puntos o pulso, ajusta color y velocidad y cópialo como CSS puro
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Elige entre cinco estilos de spinner de carga —anillo, doble anillo, puntos, pulso y barras— y ajusta tamaño, color y velocidad con vista previa en tiempo real. El código generado es HTML y CSS puros, sin imágenes ni librerías externas, así que puedes añadirlo de forma ligera a cualquier proyecto web.
Cómo usar
- Elige la pestaña del estilo de spinner que quieras (anillo, doble anillo, puntos, pulso o barras).
- Ajusta el tamaño, el grosor y la velocidad con los controles deslizantes y el color, y comprueba la vista previa.
- Obtén el código con «Copiar HTML» y «Copiar CSS» (o copiar todo).
- Coloca el HTML donde vaya la carga y pega el CSS en tu hoja de estilos: listo.
Preguntas frecuentes
- ¿Se envían a un servidor los valores que introduzco?
- No. La selección del estilo, la vista previa y la generación del código se procesan únicamente en el navegador del usuario. Ningún valor se envía ni se guarda en un servidor.
- ¿Necesito imágenes o librerías externas?
- No hace falta. El código generado son solo HTML puro y animaciones CSS (@keyframes), por lo que funciona sin imágenes GIF ni librerías de JavaScript.
- ¿Cómo centro el spinner?
- Aplica al elemento padre que lo envuelve display:flex; justify-content:center; align-items:center;. El color y la velocidad se ajustan sin más cambiando los valores del CSS generado.