ProgressBarComponent （进度条组件）
一个简单、干净且响应迅速的进度条组件，具有适用于食品/餐厅网站的霓虹灯/电色，具有深色模式支持和瑞士/国际排版设计。
HTML 代码
<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>