Componentes Barra de progreso Componente de la barra de progreso del modo oscuro

Componente de la barra de progreso del modo oscuro

Un componente de barra de progreso de modo oscuro receptivo para sitios web comerciales / corporativos, que utiliza colores vibrantes y elementos interactivos.

Vista previa

Código HTML

<div class="p-6 max-w-md mx-auto bg-gray-800 rounded-xl shadow-md space-y-4">
    <h2 class="text-2xl font-bold text-white text-center">Progress Tracker</h2>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 1</span>
        <span class="text-sm text-gray-400">75%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-green-500 h-4 rounded-full" style="width: 75%;"></div>
    </div>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 2</span>
        <span class="text-sm text-gray-400">50%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-yellow-500 h-4 rounded-full" style="width: 50%;"></div>
    </div>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 3</span>
        <span class="text-sm text-gray-400">30%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-red-500 h-4 rounded-full" style="width: 30%;"></div>
    </div>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 4</span>
        <span class="text-sm text-gray-400">10%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-blue-500 h-4 rounded-full" style="width: 10%;"></div>
    </div>
</div>

Componentes relacionados

Barra de progreso de neumorfismo

Una barra de progreso de estilo Neumorphism para portafolios, con una combinación de colores pastel, complejidad moderada, capacidad de respuesta y compatibilidad con temas oscuros. No se incluye JavaScript; el componente está construido con HTML y Tailwind CSS.

Abrir

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.

Abrir

Barra de progreso neo-retro de Cyberpunk

Un componente de barra de progreso de complejidad moderada con una estética cyberpunk, neo-retro, fondos oscuros y colores de acento vintage apagados, diseñado para plataformas de entretenimiento/medios. Cuenta con una pantalla de progreso segmentada y es totalmente sensible con soporte para el modo oscuro.

Abrir