Barre de progression

Barre de progression Glassmorphism

Barre de progression de style Glassmorphism conçue pour les interfaces de médias sociaux, avec des couleurs vives et la prise en charge du mode sombre. Mise en page simple sans JavaScript.

Ouvrir l’aperçu

                <div class="w-full bg-gray-200 bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-full h-4 dark:bg-gray-700 dark:bg-opacity-20 dark:backdrop-filter dark:backdrop-blur-lg">
  <div class="bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 h-4 rounded-full" style="width: 75%;"></div>
</div>

Composant de la barre de progression du mode sombre

Un composant de barre de progression réactif en mode sombre pour les sites Web d’entreprise, utilisant des couleurs vives et des éléments interactifs.

Ouvrir l’aperçu

                <div class="p-6 max-w-md mx-auto bg-gray-800 rounded-xl shadow-md space-y-4">
    <h2 class="text-2xl font-bold text-white text-center">Progress Tracker</h2>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 1</span>
        <span class="text-sm text-gray-400">75%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-green-500 h-4 rounded-full" style="width: 75%;"></div>
    </div>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 2</span>
        <span class="text-sm text-gray-400">50%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-yellow-500 h-4 rounded-full" style="width: 50%;"></div>
    </div>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 3</span>
        <span class="text-sm text-gray-400">30%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-red-500 h-4 rounded-full" style="width: 30%;"></div>
    </div>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 4</span>
        <span class="text-sm text-gray-400">10%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-blue-500 h-4 rounded-full" style="width: 10%;"></div>
    </div>
</div>

Composant de la barre de progression

Un composant de barre de progression réactif conçu pour le mode sombre avec une palette de couleurs pastel, adapté aux sites Web d’entreprise.

Ouvrir l’aperçu

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-md">
    <h2 class="text-white text-lg font-semibold mb-4">Progress Bar</h2>
    <div class="relative pt-1">
        <div class="flex justify-between mb-1 text-sm text-white">
            <span>0%</span>
            <span>100%</span>
        </div>
        <div class="h-2 bg-gray-600 rounded">
            <div class="bg-pastel-green-500 h-full rounded" style="width: 70%;"></div>
        </div>
    </div>
    <div class="flex items-center justify-between mt-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
            <span class="text-white">John Doe</span>
        </div>
        <span class="text-gray-400 dark:text-gray-500">In Progress</span>
    </div>
</div>

Barre de progression du mode sombre

Un composant de barre de progression réactif conçu pour le mode sombre à l’aide de Tailwind CSS, avec un design élégant et la prise en charge du thème sombre.

Ouvrir l’aperçu

                <div class="bg-gray-800 rounded-lg p-4 w-full">
    <h3 class="text-white text-lg font-semibold mb-2">Progress Bar</h3>
    <div class="relative pt-1">
        <div class="flex mb-2 items-center justify-between">
            <div>
                <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200">
                    70%
                </span>
            </div>
            <div class="text-right">
                <span class="text-xs font-semibold inline-block text-teal-600">
                    Completed
                </span>
            </div>
        </div>
        <div class="flex h-2 mb-4 rounded bg-gray-700">
            <div class="w-7/12 h-full bg-teal-600 rounded"></div>
        </div>
    </div>
    <div class="mt-2 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-600 mr-2">
        <span class="text-white text-sm">John Doe</span>
    </div>
</div>

Barre de progression neumorphe

Un composant de barre de progression réactif conçu avec le style Neumorphism, prenant en charge les thèmes clairs et sombres à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4">
    <div class="w-64 bg-gray-200 dark:bg-gray-900 rounded-full shadow-lg p-1">
        <div class="bg-gradient-to-r from-blue-500 to-blue-700 h-4 rounded-full" style="width: 70%;"></div>
    </div>
    <span class="mt-2 text-gray-700 dark:text-gray-300">70%</span>
</div>

Composant de la barre de progression

Un composant de barre de progression réactif conçu pour le mode sombre, à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="flex items-center justify-center h-screen bg-gray-900">
  <div class="w-full max-w-md">
    <h2 class="text-white text-lg font-semibold mb-4">Progress Bar</h2>
    <div class="relative pt-1">
      <div class="flex items-center justify-between mb-2">
        <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200">
          70%
        </span>
        <span class="text-xs font-semibold inline-block text-gray-400">
          7/10
        </span>
      </div>
      <div class="h-2 bg-gray-700 rounded">
        <div class="h-full bg-teal-500 rounded" style="width: 70%;"></div>
      </div>
    </div>
    <p class="text-gray-400 text-sm mt-2">Loading...</p>
  </div>
</div>

Composant de la barre de progression

Un composant de barre de progression réactif conçu pour le mode sombre à l’aide de Tailwind CSS, adapté aux applications Web modernes.

Ouvrir l’aperçu

                <div class="flex items-center justify-center h-screen bg-gray-900 p-4">
    <div class="w-full max-w-md">
        <h2 class="text-white text-lg font-semibold mb-2">Upload Progress</h2>
        <div class="relative bg-gray-700 rounded-full h-4">
            <div class="bg-green-500 rounded-full h-full" style="width: 60%;"></div>
        </div>
        <div class="flex justify-between text-xs text-gray-400 mt-1">
            <span>0%</span>
            <span>60%</span>
            <span>100%</span>
        </div>
    </div>
</div>

Barre de progression du neumorphisme

Composant de barre de progression avec conception Neumorphism, effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS

Ouvrir l’aperçu

                <!-- Light Mode -->
<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800">
  <div class="w-64 h-4 bg-gray-300 rounded-full shadow-inner dark:bg-gray-700 dark:shadow-inner-dark">
    <div class="w-3/4 h-full text-center text-xs text-white bg-blue-500 rounded-full dark:bg-blue-600" style="width: 75%;">
    </div>
  </div>
</div>

<!-- Dark Mode (example - activate dark mode in your Tailwind config) -->
<div class="flex items-center justifies-center min-h-screen bg-gray-800">
  <div class="w-64 h-4 bg-gray-700 rounded-full shadow-inner-dark">
    <div class="w-3/4 h-full text-center text-xs text-white bg-blue-600 rounded-full" style="width: 75%;">
    </div>
  </div>
</div>

Composant de barre de progression avec conception de micro-interactions. Comprend la prise en charge des effets réactifs et des thèmes sombres en utilisant uniquement HTML et CSS (Tailwind CSS).

Ouvrir l’aperçu

                <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
  <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%; animation: progress-animation 2s infinite;"></div>
</div>

<style>
@keyframes progress-animation {
  0% { width: 0%; }
  100% { width: 45%; }
}

.dark .bg-blue-600 {
  background-color: #90cdf4; /* Lighter blue for dark mode */
}

/* Responsive considerations */
@media (max-width: 768px) {
  @keyframes progress-animation {
    0% { width: 0%; }
    100% { width: 60%; } /* Wider progress on smaller screens */
  }
  .bg-blue-600 {
    animation: progress-animation 2s infinite; /* Apply animation again for clarity */
  }
}
</style>

Catégories

Barre de progression