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

Barra de progreso skeuomórfica

Componente de barra de progreso skeuomórfico para carteras, con un esquema de color monocromático y un diseño complejo e interactivo con soporte de modo responsivo y oscuro mediante 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

Componente de la barra de progreso

Un componente de barra de progreso receptivo diseñado con elementos 3D, utilizando un esquema de color análogo adecuado para el comercio electrónico, con soporte para modo oscuro

Abrir