Componentes Barra de progreso Componente de la barra de progreso

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.

Vista previa

Código HTML

<div class="w-full max-w-md mx-auto p-4">
    <h2 class="text-white text-xl font-bold mb-2">Loading Your Items...</h2>
    <div class="bg-gray-300 dark:bg-gray-700 rounded-full h-6">
        <div class="bg-black dark:bg-white h-6 rounded-full" style="width: 70%;"></div>
    </div>
    <div class="flex justify-between mt-2">
        <span class="text-gray-500 dark:text-gray-300 text-sm">0%</span>
        <span class="text-gray-500 dark:text-gray-300 text-sm">70%</span>
    </div>
</div>

Componentes relacionados

Componente de barra de progreso 3D

Un componente de barra de progreso receptivo diseñado para interfaces de redes sociales, con un efecto 3D, esquema de color monocromático y compatibilidad con modo oscuro, creado con Tailwind CSS.

Abrir

Industrial_Travel_Progress_Bar

Un componente simple de barra de progreso de estilo industrial para sitios web de viajes/turismo, con un esquema de color púrpura/violeta y capacidad de respuesta completa con soporte para modo oscuro.

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