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 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

Componente de la barra de progreso

Un componente simple de la barra de progreso con un diseño brutalista con un esquema de color en escala de grises para aplicaciones de comercio electrónico. Es responsivo y cuenta con soporte para modo oscuro.

Abrir

Barra de progreso de neumorfismo

Un componente de barra de progreso con estilo neumorfismo receptivo diseñado para paneles, que incorpora una función interactiva y admite el modo oscuro.

Abrir