Composant de la barre de progression
Un composant de barre de progression simple et réactif avec l’influence du Material Design, utilisant des tons chauds de coucher de soleil. Idéal pour les applications technologiques/SaaS, avec prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
<div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
<div class="p-6 sm:p-8">
<h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Upload Progress</h2>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-6">Uploading your files. Please wait...</p>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 sm:h-3.5 mb-2 relative overflow-hidden shadow-inner">
<div class="bg-gradient-to-r from-red-500 to-orange-400 h-full rounded-full dark:from-red-600 dark:to-orange-500 transition-all duration-500 ease-out" style="width: 75%;"></div>
<div class="absolute top-0 right-0 h-full w-4 bg-white dark:bg-gray-800 opacity-20 transform -skew-x-12" style="margin-left: -2px;"></div>
</div>
<div class="flex justify-between items-center text-sm font-medium text-gray-700 dark:text-gray-300">
<span>75% Complete</span>
<span>3 of 4 files</span>
</div>
<div class="mt-6 flex justify-end">
<button class="px-4 py-2 sm:px-5 sm:py-2.5 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-md font-semibold text-sm hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75 transition duration-150 ease-in-out">
Cancel
</button>
</div>
</div>
</div>
</div>Composants associés
Composant de la barre de progression Bauhaus
Un composant de barre de progression de complexité modérée, réactif, inspiré du Bauhaus, adapté aux plates-formes de divertissement/médias, avec des neutres froids et la prise en charge du mode sombre.
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.
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.