ProgressBarComponent
Un composant de barre de progression simple, propre et réactif avec des couleurs néon/électriques pour les sites Web d’alimentation/restaurants, avec prise en charge du mode sombre et conception typographique suisse/internationale.
HTML Code
<div class="font-sans antialiased bg-gray-50 dark:bg-gray-900 p-4 sm:p-6 md:p-8 lg:p-10 flex min-h-screen items-center justify-center">
<div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 sm:p-8 md:p-10 leading-tight border border-gray-200 dark:border-gray-700">
<h2 class="text-xl sm:text-2xl md:text-3xl font-extrabold text-gray-900 dark:text-white mb-2 sm:mb-3 md:mb-4 tracking-tight">
Your Order Progress
</h2>
<p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 mb-6 sm:mb-8 md:mb-10">
Keep an eye on your delicious order's journey!
</p>
<div class="mb-6 sm:mb-8 md:mb-10">
<div class="flex justify-between items-center mb-2">
<span class="text-lg sm:text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-pink-500 dark:from-red-400 dark:to-pink-400">
Preparing Your Feast
</span>
<span class="text-sm sm:text-base font-semibold text-gray-800 dark:text-gray-200">
75%
</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3">
<div class="bg-gradient-to-r from-fuchsia-500 to-pink-500 dark:from-fuchsia-400 dark:to-pink-400 h-3 rounded-full" style="width: 75%;">
</div>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-center sm:text-left">
<div class="space-y-1">
<p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Estimated Delivery
</p>
<p class="text-base sm:text-lg md:text-xl font-bold text-gray-900 dark:text-white">
15-20 min
</p>
</div>
<div class="space-y-1">
<p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Order ID
</p>
<p class="text-base sm:text-lg md:text-xl font-bold text-gray-900 dark:text-white break-all">
#FDRM_87Y5XC
</p>
</div>
</div>
</div>
</div>Composants associés
Barre de progression des commandes e-commerce
Un composant de barre de progression réactif pour le commerce électronique avec prise en charge du mode sombre, avec un design monochromatique. Pas de JavaScript, seulement du HTML et du CSS Tailwind.
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.
Barre de progression néo-rétro cyberpunk
Un composant de barre de progression de complexité modérée avec une esthétique cyberpunk et néo-rétro, des arrière-plans sombres et des couleurs d’accent vintage discrètes, conçu pour les plateformes de divertissement/médias. Il dispose d’un affichage de progression segmenté et est entièrement réactif avec la prise en charge du mode sombre.