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
Barre de progression
Un composant de barre de progression réactif avec prise en charge du mode sombre pour le commerce électronique, avec une palette de couleurs vives et une mise en page simple.
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.
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.