Composants Indicateurs de progrès Volet Indicateurs de progrès

Volet Indicateurs de progrès

Un indicateur de progression simple conçu avec un effet de glassmorphism, adapté aux sites Web de commerce électronique avec prise en charge du mode sombre et une palette de couleurs monochromatiques.

Aperçu

HTML Code

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

Composants associés

Volet Indicateurs de progrès

Indicateurs de progression inspirés du papier/de l’impression pour une place de marché, avec des couleurs bonbons/sucrées. Conception complexe avec plusieurs étapes, mise en page réactive et prise en charge du mode sombre.

Ouvrir

Volet Indicateurs de progrès

Il s’agit d’un composant d’indicateur de progression de style Material Design utilisant Tailwind CSS, avec des effets réactifs et la prise en charge du thème sombre.

Ouvrir

Composant Indicateurs de Progression Glassmorphism

Indicateur de progression Glassmorphism Composant avec palette de couleurs vives et complexité simple.

Ouvrir