Rechercher des composants

Catégories

Composants Indicateurs de progrès

Indicateurs de progrès

Indicateurs visuels des processus en cours

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.

Ouvrir Aperçu

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

Volet Indicateurs de progrès

Un composant d’indicateur de progression minimaliste conçu pour mettre en valeur la progression du portefeuille à l’aide de couleurs vives et d’un design réactif avec prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="max-w-4xl mx-auto p-8">
  <h2 class="text-2xl font-bold text-center mb-6">Portfolio Progress Indicators</h2>
  <div class="space-y-8">
    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-5 shadow-lg">
      <div class="flex items-center justify-between mb-2">
        <span class="text-lg font-semibold text-blue-600 dark:text-blue-400">Project 1</span>
        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">70%</span>
      </div>
      <div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
        <div class="absolute h-4 bg-blue-600 dark:bg-blue-400 rounded-full" style="width: 70%;"></div>
      </div>
    </div>
    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-5 shadow-lg">
      <div class="flex items-center justify-between mb-2">
        <span class="text-lg font-semibold text-red-600 dark:text-red-400">Project 2</span>
        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">45%</span>
      </div>
      <div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
        <div class="absolute h-4 bg-red-600 dark:bg-red-400 rounded-full" style="width: 45%;"></div>
      </div>
    </div>
    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-5 shadow-lg">
      <div class="flex items-center justify-between mb-2">
        <span class="text-lg font-semibold text-green-600 dark:text-green-400">Project 3</span>
        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">90%</span>
      </div>
      <div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
        <div class="absolute h-4 bg-green-600 dark:bg-green-400 rounded-full" style="width: 90%;"></div>
      </div>
    </div>
    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-5 shadow-lg">
      <div class="flex items-center justify-between mb-2">
        <span class="text-lg font-semibold text-yellow-600 dark:text-yellow-400">Project 4</span>
        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">60%</span>
      </div>
      <div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
        <div class="absolute h-4 bg-yellow-600 dark:bg-yellow-400 rounded-full" style="width: 60%;"></div>
      </div>
    </div>
  </div>
</div>

Volet Indicateurs de progrès

Un composant simple d’indicateurs de progression inspiré de l’esthétique rétro/vintage des années 80 et 90, utilisant une palette de couleurs complémentaires. Conçu pour les interfaces de médias sociaux et réactif avec prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center p-6 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-white mb-4">Progress Indicators</h2>
    <div class="w-full bg-gray-700 dark:bg-gray-600 rounded-lg">
        <div class="bg-blue-500 dark:bg-blue-400 h-4 rounded-lg" style="width: 70%;"></div>
    </div>
    <div class="flex justify-between w-full text-sm mt-2 text-gray-300 dark:text-gray-200">
        <span>0%</span>
        <span>70%</span>
    </div>
    <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-blue-500">
        <div class="ml-3">
            <p class="text-md text-white">User Name</p>
            <p class="text-sm text-gray-400 dark:text-gray-500">Status: Active</p>
        </div>
    </div>
    <p class="text-gray-500 dark:text-gray-400 mt-2 text-center">Loading data...</p>
    <img src="https://picsum.photos/200/100?random=1" alt="Random Image" class="mt-4 rounded-lg shadow-md">
</div>

Volet Indicateurs de progrès

Un indicateur de progression de style neumorphique adapté aux interfaces de médias sociaux, doté d’une mise en page simple et d’un design réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center p-6">
  <div class="w-full max-w-xs p-4 bg-gray-200 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-md">
    <h3 class="text-center text-lg font-semibold text-gray-800 dark:text-gray-200">Profile Completion</h3>
    <div class="my-4">
      <div class="flex justify-between">
        <span class="text-sm text-gray-600 dark:text-gray-400">0%</span>
        <span class="text-sm text-gray-600 dark:text-gray-400">100%</span>
      </div>
      <div class="h-2 bg-gray-300 rounded-lg dark:bg-gray-700">
        <div class="h-full bg-gradient-to-r from-green-400 to-blue-500 rounded-lg" style="width: 70%;"></div>
      </div>
    </div>
    <div class="flex items-center justify-between">
      <img src="https://picsum.photos/40" alt="User Avatar" class="rounded-full border-2 border-gray-300 dark:border-gray-600" />
      <span class="text-sm text-gray-800 dark:text-gray-200">User Name</span>
    </div>
  </div>
</div>

Volet Indicateurs de progrès

Un composant d’indicateurs de progression de style de conception 3D avec une palette de couleurs en niveaux de gris pour la consommation de contenu de blog, avec une conception réactive et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Progress Indicators</h2>
    <div class="relative w-full max-w-md">
        <div class="flex items-center justify-between mb-2">
            <span class="text-gray-600 dark:text-gray-400">Step 1</span>
            <span class="text-gray-600 dark:text-gray-400">20%</span>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-full h-4">
            <div class="bg-gray-800 dark:bg-gray-300 h-4 rounded-full" style="width: 20%;"></div>
        </div>
    </div>
    <div class="relative w-full max-w-md mt-4">
        <div class="flex items-center justify-between mb-2">
            <span class="text-gray-600 dark:text-gray-400">Step 2</span>
            <span class="text-gray-600 dark:text-gray-400">50%</span>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-full h-4">
            <div class="bg-gray-800 dark:bg-gray-300 h-4 rounded-full" style="width: 50%;"></div>
        </div>
    </div>
    <div class="relative w-full max-w-md mt-4">
        <div class="flex items-center justify-between mb-2">
            <span class="text-gray-600 dark:text-gray-400">Step 3</span>
            <span class="text-gray-600 dark:text-gray-400">80%</span>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-full h-4">
            <div class="bg-gray-800 dark:bg-gray-300 h-4 rounded-full" style="width: 80%;"></div>
        </div>
    </div>
    <div class="relative w-full max-w-md mt-4">
        <div class="flex items-center justify-between mb-2">
            <span class="text-gray-600 dark:text-gray-400">Step 4</span>
            <span class="text-gray-600 dark:text-gray-400">100%</span>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-full h-4">
            <div class="bg-gray-800 dark:bg-gray-300 h-4 rounded-full" style="width: 100%;"></div>
        </div>
    </div>
    <div class="mt-6">
        <img src="https://picsum.photos/200/100?random=1" alt="Content Image" class="rounded-md shadow-md">
    </div>
    <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-500 dark:border-gray-300"> 
        <span class="ml-2 text-gray-800 dark:text-white">Author Name</span>
    </div>
</div>

Composant Indicateurs de Progression Glassmorphism

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

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center min-h-screen dark:bg-gray-900">
  <div class="dark:bg-gray-800 bg-white bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg dark:backdrop-blur-lg rounded-lg p-6 shadow-xl dark:shadow-xl">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Progress</h2>
    <div class="w-64 h-4 bg-gray-300 rounded-full overflow-hidden dark:bg-gray-700">
      <div class="h-full bg-gradient-to-r from-cyan-400 to-blue-500 dark:from-cyan-600 dark:to-blue-700 w-3/4 rounded-full"></div>
    </div>
    <p class="text-sm text-gray-700 dark:text-gray-300 mt-2">75% Complete</p>
  </div>
</div>

Composant de la barre de progression 3D

Style avec des effets 3D, Tailwind CSS, un design réactif et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class='relative pt-1 dark:bg-gray-800'>
  <div class='overflow-hidden h-2 text-xs flex rounded bg-gray-200 dark:bg-gray-700'>
    <div style='width: 45%' class='shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500 dark:bg-blue-400'></div>
  </div>
  <div class='mt-2 text-right text-xs dark:text-gray-400'>45% Complete</div>
</div>

Volet Indicateurs de progrès

Un composant d’indicateur de progression avec un style glassmorphism, un design réactif et une prise en charge du thème sombre. Utilise Tailwind CSS pour le coiffage.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen p-6 bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl p-6 shadow-lg">
    <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Progress</h2>
    
    <div class="mb-4">
      <div class="flex justify-between items-center mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Task Completion</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">75%</span>
      </div>
      <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
        <div class="bg-blue-600 h-2.5 rounded-full" style="width: 75%"></div>
      </div>
    </div>

    <div class="mb-4">
      <div class="flex justify-between items-center mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Resource Usage</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">50%</span>
      </div>
      <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
        <div class="bg-green-600 h-2.5 rounded-full" style="width: 50%"></div>
      </div>
    </div>

    <div>
      <div class="flex justify-between items-center mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Download Progress</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">90%</span>
      </div>
      <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
        <div class="bg-yellow-400 h-2.5 rounded-full" style="width: 90%"></div>
      </div>
    </div>

  </div>
</div>

Volet Indicateurs de progrès

Un composant d’indicateurs de progression de style rétro/vintage utilisant Tailwind CSS avec des effets réactifs et la prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <h1 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">
        Retro Progress Indicators
    </h1>
    <div class="w-full max-w-lg">
        <!-- Progress Bar -->
        <div class="mb-6">
            <div class="relative pt-1">
                <div class="flex mb-2 items-center justify-between">
                    <div class="text-sm font-medium text-gray-600 dark:text-gray-300">Loading...</div>
                    <div class="text-sm font-medium text-gray-600 dark:text-gray-300">80%</div>
                </div>
                <div class="flex h-2 mb-4 bg-gray-200 rounded dark:bg-gray-700">
                    <div class="bg-yellow-500 h-full rounded" style="width: 80%"></div>
                </div>
            </div>
        </div>
        <!-- Circular Progress Indicator -->
        <div class="flex items-center justify-center mb-6">
            <div class="relative w-24 h-24">
                <img src="https://picsum.photos/seed/circularprogress/300/300" class="rounded-full shadow-lg" alt="Circular Progress" /> 
                <div class="absolute inset-0 flex items-center justify-center text-xl font-bold text-yellow-500">
                    80%
                </div>
            </div>
        </div>
        <!-- Step Indicators -->
        <div class="flex justify-between w-full text-center">
            <div>
                <div class="w-4 h-4 bg-yellow-500 rounded-full mx-auto mb-2"></div>
                <div class="text-sm font-medium text-gray-600 dark:text-gray-300">Step 1</div>
            </div>
            <div>
                <div class="w-4 h-4 bg-gray-300 rounded-full mx-auto mb-2 dark:bg-gray-600"></div>
                <div class="text-sm font-medium text-gray-600 dark:text-gray-300">Step 2</div>
            </div>
            <div>
                <div class="w-4 h-4 bg-gray-300 rounded-full mx-auto mb-2 dark:bg-gray-600"></div>
                <div class="text-sm font-medium text-gray-600 dark:text-gray-300">Step 3</div>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" class="rounded-full w-16 h-16" alt="User Avatar" />
        <div class="text-center mt-2 text-sm text-gray-600 dark:text-gray-300">John Doe</div>
    </div>
</div>

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 Aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-800 p-4">

  <!-- Linear Progress Bar -->
  <div class="w-64 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden shadow-md">
    <div class="h-full bg-blue-500 dark:bg-blue-400 w-3/4 rounded-full animate-pulse"></div>
  </div>

  <!-- Spacer -->
  <div class="my-8"></div>

  <!-- Circular Progress Indicator -->
  <div class="relative">
    <div class="w-16 h-16 border-4 border-blue-500 dark:border-blue-400 border-t-transparent border-solid rounded-full animate-spin shadow-md"></div>
    <div class="absolute top-0 left-0 w-16 h-16 flex items-center justify-center text-blue-700 dark:text-blue-300 font-bold">
      75%
    </div>
  </div>

  <!-- Spacer -->
  <div class="my-8"></div>

  <!-- Linear Progress Bar with Label -->
  <div class="w-64">
    <div class="flex justify-between mb-1 text-gray-700 dark:text-gray-300">
      <span class="text-base font-medium">Progress</span>
      <span class="text-sm font-medium">45%</span>
    </div>
    <div class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden shadow-md">
      <div class="h-full bg-green-500 dark:bg-green-400 w-[45%] rounded-full" style="width: 45%;"></div>
    </div>
  </div>

</div>