⚡ CSS Loaders Profesionales - Vibe Coding

Colección curada de 9 loaders ultra-ligeros con CSS puro

Demo en Vivo • Documentación • Contribuir

📋 Tabla de Contenidos

Características
Demo Interactiva
Instalación
Uso Rápido
Galería de Loaders
Personalización
Performance
Accesibilidad
Navegadores Soportados
Contribuir
Licencia

✨ Características

✅ 0 Dependencias JavaScript - CSS puro, sin librerías externas
✅ Ultra-ligero - Menos de 2KB por loader
✅ 100% Responsive - Funciona en cualquier dispositivo
✅ Performance Superior - Optimizado con GPU acceleration
✅ Accesible - Compatible con lectores de pantalla
✅ Personalizable - Fácil de adaptar a tu marca
✅ Moderno - Utiliza las últimas características de CSS
✅ Copy & Paste - Listo para usar en segundos
✅ SEO Friendly - Metadatos optimizados incluidos

🎯 Demo Interactiva

Visita nuestra página de demostración para ver todos los loaders en acción y copiar el código directamente.

Características de la demo:

Vista previa en tiempo real de cada loader
Selector interactivo con hover effects
Código completo HTML + CSS para cada loader
Botones de copiar y descargar
Guía de implementación paso a paso

🚀 Instalación

Opción 1: Descarga Directa

Clona el repositorio:

git clone https://github.com/vibecoding/css-loaders.git
cd css-loaders

Opción 2: CDN

Incluye el CSS en tu HTML:

<link rel="stylesheet" href="https://cdn.vibecoding.dev/loaders.css">

Opción 3: NPM (próximamente)

npm install @vibecoding/css-loaders

💡 Uso Rápido

Método 1: HTML + CSS Inline

<!-- HTML -->
<div class="loader loader-1"></div>

<!-- CSS -->
<style>
  .loader {
    width: 40px;
    height: 40px;
    position: relative;
  }
  /* Agrega el CSS específico del loader que elijas */
</style>

Método 2: Clases CSS Externas

Incluye el archivo CSS en tu proyecto
Agrega el div con la clase correspondiente

<link rel="stylesheet" href="path/to/loaders.css">
<div class="loader loader-spinning-circle"></div>

Método 3: Framework Integration

React:

const Loader = () => (
  <div className="loader loader-1" role="status">
    <span className="visually-hidden">Cargando...</span>
  </div>
);

Vue:

<template>
  <div class="loader loader-1" role="status">
    <span class="visually-hidden">Cargando...</span>
  </div>
</template>

🎨 Galería de Loaders

1. Spinning Circle

Loader circular con animación de rotación suave.

Uso ideal: Operaciones de carga general
Performance: Excelente
Personalización: Alta

2. 3D Flaps

Efecto 3D con perspectiva y transformaciones.

Uso ideal: Aplicaciones modernas, dashboards
Performance: Muy buena
Personalización: Media

3. Map Pin

Animación de pin de mapa con rebote.

Uso ideal: Aplicaciones de geolocalización
Performance: Excelente
Personalización: Alta

4. Rotating Dots

Dos puntos que rotan alrededor de un eje.

Uso ideal: Sincronización, procesos duales
Performance: Excelente
Personalización: Alta

5. Bouncing Dots

Puntos que rebotan verticalmente.

Uso ideal: Carga de mensajes, chat
Performance: Excelente
Personalización: Alta

6. Pac-Man

Clásico Pac-Man comiendo puntos.

Uso ideal: Aplicaciones divertidas, gaming
Performance: Muy buena
Personalización: Media

7. Progress Bar

Barra de progreso con animación de relleno.

Uso ideal: Cargas con porcentaje conocido
Performance: Excelente
Personalización: Alta

8. Ripple Drop

Efecto de gota con ondas expansivas.

Uso ideal: Actualizaciones, refresh
Performance: Muy buena
Personalización: Media

9. Orbital

Sistema orbital con múltiples elementos.

Uso ideal: Procesos complejos, análisis
Performance: Muy buena
Personalización: Media

🎨 Personalización

Cambiar Colores

Simplemente reemplaza #ffffff en el CSS:

/* Original */
background: #ffffff;

/* Tu color de marca */
background: #ff6b6b;

Ajustar Tamaño

Modifica las propiedades width y height:

.loader {
  width: 60px;   /* Tamaño deseado */
  height: 60px;  /* Tamaño deseado */
  position: relative;
}

Velocidad de Animación

Cambia animation-duration:

/* Más rápido */
animation-duration: 1s;

/* Más lento */
animation-duration: 4s;

Tema Oscuro/Claro

/* Tema oscuro */
.loader::before { background: #ffffff; }

/* Tema claro */
.loader::before { background: #000000; }

⚡ Performance

Optimizaciones Aplicadas

✅ GPU Acceleration: Uso de transform y opacity
✅ Will-change: Pre-optimización de propiedades animadas
✅ Render Layers: Aislamiento de capas de renderizado
✅ CSS Containment: Mejora de painting performance

Benchmarks

Loader	FPS Promedio	CPU Usage
Spinning Circle	60	2-3%
3D Flaps	60	3-4%
Map Pin	60	2-3%
Rotating Dots	60	2-3%
Bouncing Dots	60	2-3%

Mejores Prácticas

/* ✅ BUENO - Usa transform */
.loader {
  transform: translateX(10px);
}

/* ❌ MALO - Evita left/top */
.loader {
  left: 10px;
}

♿ Accesibilidad

Implementación Recomendada

<div class="loader loader-1" role="status" aria-label="Cargando contenido">
  <span class="visually-hidden">Cargando...</span>
</div>

CSS para Texto Invisible

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

Soporte para `prefers-reduced-motion`

@media (prefers-reduced-motion: reduce) {
  .loader,
  .loader::before,
  .loader::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

🌐 Navegadores Soportados

Navegador	Versión Mínima
Chrome	90+
Firefox	88+
Safari	14+
Edge	90+
Opera	76+
Samsung Internet	14+

Nota: Para navegadores más antiguos, se mostrarán versiones simplificadas sin animaciones 3D complejas.

📁 Estructura del Proyecto

css-loaders-vibe-coding/
├── index.html              # Página de demostración completa
├── README.md               # Este archivo
├── LICENSE                 # Licencia MIT
├── CONTRIBUTING.md         # Guía de contribución
├── css/
│   ├── loaders.css        # Todos los loaders (minificado)
│   └── individual/        # Loaders individuales
│       ├── loader-1.css
│       ├── loader-2.css
│       └── ...
├── js/
│   └── demo.js            # JavaScript para la demo
├── docs/
│   ├── customization.md   # Guía de personalización
│   ├── performance.md     # Métricas de performance
│   └── accessibility.md   # Guía de accesibilidad
└── examples/
    ├── react/             # Ejemplos para React
    ├── vue/               # Ejemplos para Vue
    └── vanilla/           # Ejemplos vanilla JS

🤝 Contribuir

¡Las contribuciones son bienvenidas! Por favor lee nuestro CONTRIBUTING.md para detalles sobre nuestro código de conducta y el proceso para enviar pull requests.

Cómo Contribuir

Fork el proyecto
Crea tu rama de feature (git checkout -b feature/NuevoLoader)
Commit tus cambios (git commit -m 'Agrega nuevo loader increíble')
Push a la rama (git push origin feature/NuevoLoader)
Abre un Pull Request

Reportar Bugs

Abre un issue con:

Descripción clara del problema
Pasos para reproducir
Navegador y versión
Screenshots si es posible

📊 Roadmap

🙏 Agradecimientos

Inspirado por la comunidad de Vibe Coding
Diseños basados en las mejores prácticas de UX
Optimizaciones de performance gracias a feedback de la comunidad

📄 Licencia

Este proyecto está bajo la Licencia MIT - ver el archivo LICENSE para más detalles.

📞 Contacto

Website: vibecoding.dev
GitHub: @vibecoding
Twitter: @vibecoding
Discord: Únete a la comunidad

⭐ Si este proyecto te fue útil, considera darle una estrella en GitHub ⭐

Hecho con ❤️ por la comunidad Vibe Coding

Name		Name	Last commit message	Last commit date
Latest commit History 4 Commits
CHANGELOG.md		CHANGELOG.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
Premium loaders-pack-vibe-coding		Premium loaders-pack-vibe-coding
README.md		README.md
REPO_INFO.md		REPO_INFO.md
index.html		index.html
package.json		package.json

Folders and files

Latest commit

History

Repository files navigation

⚡ CSS Loaders Profesionales - Vibe Coding

📋 Tabla de Contenidos

✨ Características

🎯 Demo Interactiva

🚀 Instalación

Opción 1: Descarga Directa

Opción 2: CDN

Opción 3: NPM (próximamente)

💡 Uso Rápido

Método 1: HTML + CSS Inline

Método 2: Clases CSS Externas

Método 3: Framework Integration

🎨 Galería de Loaders

1. Spinning Circle

2. 3D Flaps

3. Map Pin

4. Rotating Dots

5. Bouncing Dots

6. Pac-Man

7. Progress Bar

8. Ripple Drop

9. Orbital

🎨 Personalización

Cambiar Colores

Ajustar Tamaño

Velocidad de Animación

Tema Oscuro/Claro

⚡ Performance

Optimizaciones Aplicadas

Benchmarks

Mejores Prácticas

♿ Accesibilidad

Implementación Recomendada

CSS para Texto Invisible

Soporte para prefers-reduced-motion

🌐 Navegadores Soportados

📁 Estructura del Proyecto

🤝 Contribuir

Cómo Contribuir

Reportar Bugs

📊 Roadmap

🙏 Agradecimientos

📄 Licencia

📞 Contacto

About

Topics

Resources

License

Contributing

Uh oh!

Stars

Watchers

Forks

Releases 1

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Soporte para `prefers-reduced-motion`

Packages