Barre de progression

Barre de progression du mode sombre triadique

Un composant de barre de progression simple et triadique pour le mode sombre, adapté aux blogs et à la consommation de contenu. Il dispose d’un design réactif avec Tailwind CSS, utilisant le préfixe dark : pour la prise en charge du thème sombre sans JavaScript.

Ouvrir l’aperçu

                <div class="dark:bg-gray-900 p-4">
  <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Reading Progress</h2>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4">
    <div class="dark:bg-purple-500 h-2.5 rounded-full" style="width: 45%;"></div>
  </div>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4">
    <div class="dark:bg-yellow-500 h-2.5 rounded-full" style="width: 60%;"></div>
  </div>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
    <div class="dark:bg-emerald-500 h-2.5 rounded-full" style="width: 75%;"></div>
  </div>
</div>

Composant de la barre de progression

Un composant de barre de progression réactif conçu dans le style Material Design, incorporant des schémas de couleurs pastel pour les vitrines de portfolio. Il prend en charge le mode sombre.

Ouvrir l’aperçu

                <div class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-xl font-semibold mb-2 text-gray-700 dark:text-gray-200">Project Progress</h2>
    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full">
        <div class="bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 h-4 rounded-full" style="width: 70%;"></div>
    </div>
    <div class="flex justify-between w-full mt-2 text-xs text-gray-600 dark:text-gray-400">
        <span>0%</span>
        <span>70%</span>
        <span>100%</span>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/100/100" alt="Project Screenshot" class="rounded-lg shadow-md"> 
    </div>
    <div class="mt-2 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
        <span class="text-gray-700 dark:text-gray-200">Reviewed by John Doe</span>
    </div>
</div>

Barre de progression du neumorphisme

Une barre de progression de style Neumorphisme pour les portfolios, avec une palette de couleurs pastel, une complexité modérée, une réactivité et une prise en charge du thème sombre. Aucun JavaScript n’est inclus ; le composant est construit avec HTML et Tailwind CSS.

Ouvrir l’aperçu

                <div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-800 p-4">
  <div class="w-full max-w-md bg-gray-200 dark:bg-gray-700 rounded-full shadow-inner dark:shadow-inner-dark overflow-hidden">
    <div class="bg-purple-400 text-xs leading-none py-1 text-center text-white rounded-full shadow-neumo-progress dark:shadow-neumo-progress-dark" style="width: 75%"> 75% </div>
  </div>
  <div class="mt-8 text-gray-700 dark:text-gray-300">
    Skill Progress
  </div>
</div>

<style>
.shadow-inner {
  box-shadow: inset 5px 5px 10px #b0b0b0,
              inset -5px -5px 10px #f0f0f0;
}

.dark .shadow-inner-dark {
  box-shadow: inset 5px 5px 10px #4a4a4a,
              inset -5px -5px 10px #363636;
}

.shadow-neumo-progress {
  box-shadow: 5px 5px 10px #a78bfa,
              -5px -5px 10px #c084fc;
}

.dark .shadow-neumo-progress-dark {
  box-shadow: 5px 5px 10px #6d28d9,
              -5px -5px 10px #7c3aed;
}
</style>

Barre de progression minimaliste

Un composant de barre de progression au design minimaliste et plat aux couleurs pastel, adapté aux sites Web professionnels d’entreprise ou d’entreprise. Il a un design réactif et prend en charge le mode sombre à l’aide de 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-400 h-2.5 rounded-full" style="width: 45%"></div>
</div>

Composant de la barre de progression

Un composant de barre de progression réactif conçu avec des éléments 3D, utilisant une palette de couleurs analogue adaptée au commerce électronique, avec prise en charge du mode sombre

Ouvrir l’aperçu

                <div class="max-w-md mx-auto p-4">
    <div class="relative h-8 bg-gray-300 rounded-md overflow-hidden dark:bg-gray-700">
        <div class="absolute inset-0 transition-all duration-300 ease-out bg-gradient-to-r from-green-400 to-blue-400 dark:from-green-600 dark:to-blue-600" style="width: 70%;"></div>
        <div class="absolute inset-0 flex items-center justify-center text-white font-semibold">
            70%
        </div>
    </div>
    <div class="mt-4 text-gray-700 dark:text-gray-300">
        <p class="text-sm">Progress towards your shopping goals.</p>
    </div>
</div>

Composant de la barre de progression 3D

Un composant de barre de progression réactif conçu pour les interfaces de réseaux sociaux, avec un effet 3D, une palette de couleurs monochromatiques et la prise en charge du mode sombre, construit à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="flex flex-col items-center py-10">
    <div class="w-full max-w-md">
        <div class="flex justify-between mb-2">
            <span class="text-gray-700 dark:text-gray-300">Progress</span>
            <span class="text-gray-700 dark:text-gray-300">75%</span>
        </div>
        <div class="relative bg-gray-200 dark:bg-gray-700 rounded-full h-4">
            <div class="absolute bg-blue-600 dark:bg-blue-300 h-full rounded-full transition-all duration-300 ease-in-out" style="width: 75%; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2), 0px 0px 15px rgba(0, 0, 0, 0.2);"></div>
        </div>
    </div>
    <div class="flex justify-center mt-4">
        <img src="https://picsum.photos/50/50" alt="Progress Image" class="rounded-full border border-gray-300 dark:border-gray-600 shadow-md">
    </div>
    <div class="mt-2 text-gray-500 dark:text-gray-400 text-sm">Some description about the progress being tracked.</div>
</div>

Barre de progression du neumorphisme

Un composant réactif de barre de progression de style neumorphisme conçu pour les tableaux de bord, intégrant une fonction interactive et prenant en charge le mode sombre.

Ouvrir l’aperçu

                <div class="max-w-md mx-auto mt-10 p-5 bg-gray-100 dark:bg-gray-800 rounded-xl shadow-md">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">Progress Bar</h2>
    <div class="relative pt-1">
        <div class="flex justify-between mb-1">
            <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200 dark:bg-teal-600 dark:text-teal-200">Task 1</span>
            <span class="text-xs font-semibold text-gray-600 dark:text-gray-400">70%</span>
        </div>
        <div class="flex items-center h-2 bg-gray-300 dark:bg-gray-600 rounded-full">
            <div class="h-full bg-teal-400 rounded-full transition-all duration-300 w-7/12"></div>
        </div>
    </div>
    <div class="relative pt-1">
        <div class="flex justify-between mb-1">
            <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-purple-600 bg-purple-200 dark:bg-purple-600 dark:text-purple-200">Task 2</span>
            <span class="text-xs font-semibold text-gray-600 dark:text-gray-400">40%</span>
        </div>
        <div class="flex items-center h-2 bg-gray-300 dark:bg-gray-600 rounded-full">
            <div class="h-full bg-purple-400 rounded-full transition-all duration-300 w-5/12"></div>
        </div>
    </div>
    <div class="relative pt-1">
        <div class="flex justify-between mb-1">
            <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blue-600 bg-blue-200 dark:bg-blue-600 dark:text-blue-200">Task 3</span>
            <span class="text-xs font-semibold text-gray-600 dark:text-gray-400">90%</span>
        </div>
        <div class="flex items-center h-2 bg-gray-300 dark:bg-gray-600 rounded-full">
            <div class="h-full bg-blue-400 rounded-full transition-all duration-300 w-11/12"></div>
        </div>
    </div>
</div>

Composant de la barre de progression

Un composant simple de barre de progression stylisé dans un design brutaliste avec une palette de couleurs en niveaux de gris pour les applications de commerce électronique. Il est réactif et prend en charge le mode sombre.

Ouvrir l’aperçu

                <div class="w-full max-w-md mx-auto p-4">
    <h2 class="text-white text-xl font-bold mb-2">Loading Your Items...</h2>
    <div class="bg-gray-300 dark:bg-gray-700 rounded-full h-6">
        <div class="bg-black dark:bg-white h-6 rounded-full" style="width: 70%;"></div>
    </div>
    <div class="flex justify-between mt-2">
        <span class="text-gray-500 dark:text-gray-300 text-sm">0%</span>
        <span class="text-gray-500 dark:text-gray-300 text-sm">70%</span>
    </div>
</div>

Barre de progression terreuse de conception matérielle

Une barre de progression inspirée du Material Design avec des tons de terre, adaptée aux interfaces de médias sociaux. Il est réactif et inclut la prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
  <div class="bg-green-700 h-2.5 rounded-full dark:bg-green-500" style="width: 45%"></div>
</div>

Composant de la barre de progression

Un composant simple de barre de progression stylisé avec un morphisme de verre et des couleurs monochromes, adapté aux sites Web d’entreprise et d’entreprise, avec prise en charge du mode sombre.

Ouvrir l’aperçu

                <div class="flex flex-col items-center justify-center h-screen bg-gray-900 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 bg-opacity-30 backdrop-blur-md border border-gray-500 rounded-lg p-6 shadow-lg w-1/2">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Progress</h2>
        <div class="relative w-full h-4 rounded-full bg-gray-300 dark:bg-gray-600">
            <div class="absolute top-0 left-0 h-4 rounded-full bg-blue-500" style="width: 70%;"></div>
        </div>
        <span class="text-base text-gray-800 dark:text-gray-200 mt-2">70%</span>
    </div>
</div>

Catégories