Componentes Barra de progreso Barra de progreso del modo oscuro triádico

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.

Vista previa

Código HTML

<div class="dark:bg-gray-900 p-4">
  <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Reading Progress</h2>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4">
    <div class="dark:bg-purple-500 h-2.5 rounded-full" style="width: 45%;"></div>
  </div>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4">
    <div class="dark:bg-yellow-500 h-2.5 rounded-full" style="width: 60%;"></div>
  </div>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
    <div class="dark:bg-emerald-500 h-2.5 rounded-full" style="width: 75%;"></div>
  </div>
</div>

Componentes relacionados

Barra de progreso de neumorfismo

Componente de barra de progreso con diseño de neumorfismo, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS

Abrir

Barra de progreso

Un componente de barra de progreso receptivo con soporte de modo oscuro para comercio electrónico, con una combinación de colores vibrantes y un diseño simple.

Abrir

Barra de progreso profesional de comercio electrónico

Un componente de barra de progreso complejo y sensible diseñado para el comercio electrónico, con una combinación de colores otoñales (naranjas, marrones, burdeos intensos) y compatible con el modo oscuro. Proporciona un aspecto limpio y profesional para entornos corporativos.

Abrir