Componentes Barra de progreso Barra de progreso

Barra de progreso

Componente de barra de progreso con diseño de microinteracciones. Incluye efectos responsivos y soporte de temas oscuros usando solo HTML y CSS (Tailwind CSS).

Vista previa

Código HTML

<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
  <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%; animation: progress-animation 2s infinite;"></div>
</div>

<style>
@keyframes progress-animation {
  0% { width: 0%; }
  100% { width: 45%; }
}

.dark .bg-blue-600 {
  background-color: #90cdf4; /* Lighter blue for dark mode */
}

/* Responsive considerations */
@media (max-width: 768px) {
  @keyframes progress-animation {
    0% { width: 0%; }
    100% { width: 60%; } /* Wider progress on smaller screens */
  }
  .bg-blue-600 {
    animation: progress-animation 2s infinite; /* Apply animation again for clarity */
  }
}
</style>

Componentes relacionados

Barra de progreso del modo oscuro triádico

Un componente de barra de progreso simple y de color triádico para el modo oscuro, adecuado para blogs y consumo de contenido. Cuenta con un diseño responsivo con Tailwind CSS, utilizando el prefijo dark: para el soporte de temas oscuros sin JavaScript.

Abrir

Barra de progreso neumórfica

Un componente de barra de progreso responsivo diseñado con el estilo Neumorphism, que admite temas claros y oscuros mediante Tailwind CSS.

Abrir

Barra de progreso de Glassmorphism

Barra de progreso de estilo glassmorphism diseñada para interfaces de redes sociales, con colores vibrantes y compatibilidad con el modo oscuro. Diseño simple sin JavaScript.

Abrir