Reto Estados de carga

Crea una página HTML completa que demuestre el uso de placeholders y spinners de Bootstrap para estados de carga. Tu página debe incluir:

Estructura requerida:

1. Sección de placeholders básicos: Crea tres párrafos con placeholders de diferentes anchos (col-6, col-8, col-4) usando spans con la clase placeholder.

2. Placeholders con animación: Implementa un contenedor con la clase placeholder-glow que contenga placeholders de diferentes tamaños (col-7, col-4, col-6) con fondo secundario.

3. Spinners básicos: Muestra ambos tipos de spinners:

• Un spinner border con la clase spinner-border y color primario
• Un spinner grow con la clase spinner-grow y color success
• Ambos deben incluir el span con visually-hidden para accesibilidad

4. Card con estado de carga: Crea una card que simule la carga de un producto:

• Header con placeholder para el título (col-6)
• Placeholder para simular imagen (altura 200px, fondo secundario)
• Body con placeholders para texto (col-12, col-7, col-9)
• Spinner centrado en el footer de la card

5. Botón con spinner: Implementa un botón deshabilitado que contenga un spinner pequeño (spinner-border-sm) y el texto "Procesando...".

Instrucciones de implementación:

• Usa la estructura HTML5 básica con Bootstrap 5.3 desde CDN
• Aplica las clases exactas mencionadas en la lección
• Organiza el contenido en un container con espaciado adecuado
• Asegúrate de incluir los atributos role="status" en los spinners
• Usa las clases de grid (col-*) para definir el ancho de los placeholders