Componentes Indicadores de progreso Componente de Indicadores de Progreso

Componente de Indicadores de Progreso

Un indicador de progreso simple diseñado con un efecto de morfismo de vidrio, adecuado para sitios web de comercio electrónico con soporte para modo oscuro y un esquema de color monocromático.

Vista previa

Código HTML

<div class="flex flex-col items-center justify-center p-5 bg-white bg-opacity-30 backdrop-blur-sm dark:bg-gray-800 dark:bg-opacity-30 rounded-lg">
    <h1 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Order Progress</h1>
    <div class="w-full mx-auto">
        <!-- Progress Bar -->
        <div class="relative pt-1">
            <div class="flex mb-2 items-center justify-between">
                <div class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-800 dark:text-white bg-blue-200 dark:bg-blue-600">
                    1. Add to Cart
                </div>
                <div class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-800 dark:text-white bg-blue-200 dark:bg-blue-600">
                    2. Checkout
                </div>
                <div class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-800 dark:text-white bg-blue-200 dark:bg-blue-600">
                    3. Payment
                </div>
            </div>
            <div class="flex h-2 mb-4 rounded bg-gray-300 dark:bg-gray-600">
                <div class="w-1/3 h-full bg-blue-600 dark:bg-blue-300"></div>
            </div>
        </div>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full">
    </div>
    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Estimated delivery: 3-5 business days</p>
</div>

Componentes relacionados

Playful_Job_Application_Progress_Indicator

Un componente de indicador de progreso complejo, lúdico y receptivo para flujos de trabajo de solicitud de empleo, con un esquema de color dulce/dulce y soporte para modo oscuro. Diseñado para bolsas de trabajo y plataformas de desarrollo profesional, representa visualmente múltiples etapas de la solicitud con transiciones animadas y mensajes alentadores.

Abrir

Componente de Indicadores de Progreso

Un componente de indicadores de progreso receptivo con estilo de cristal, con elementos translúcidos similares al vidrio esmerilado y efectos de desenfoque, que admite el tema oscuro con Tailwind CSS.

Abrir

Componente de Indicadores de Progreso

Un componente de indicadores de progreso de estilo retro / vintage que usa Tailwind CSS con efectos responsivos y soporte para temas oscuros.

Abrir