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.
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 Earthy de Material Design
Una barra de progreso inspirada en Material Design con tonos tierra, adecuada para interfaces de redes sociales. Es responsivo e incluye soporte para el modo oscuro usando Tailwind CSS.
Componente de la barra de progreso
Un componente de barra de progreso receptivo diseñado para el modo oscuro con una combinación de colores pastel, adecuado para sitios web comerciales / corporativos.
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.