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

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.

Aperçu

HTML Code

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

Composants associés

Volet Indicateurs de progrès

Un composant d’indicateurs de progression de style rétro/vintage avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir

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

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