组件 进度条 进度条组件

进度条组件

一个响应式进度条组件,设计用于暗模式,使用Tailwind CSS,适合现代Web应用程序。

预览

HTML 代码

<div class="flex items-center justify-center h-screen bg-gray-900 p-4">
    <div class="w-full max-w-md">
        <h2 class="text-white text-lg font-semibold mb-2">Upload Progress</h2>
        <div class="relative bg-gray-700 rounded-full h-4">
            <div class="bg-green-500 rounded-full h-full" style="width: 60%;"></div>
        </div>
        <div class="flex justify-between text-xs text-gray-400 mt-1">
            <span>0%</span>
            <span>60%</span>
            <span>100%</span>
        </div>
    </div>
</div>

相关组件

材料设计自然进度条

一个以材料设计为灵感的进度条,使用大地色调,适用于社交媒体界面。它是响应式的,并且使用Tailwind CSS包括黑暗模式支持。

打开

玻璃态进度条

一款玻璃形态风格的进度条,专为社交媒体界面设计,特色鲜艳色彩并支持暗模式。布局简单,无需JavaScript。

打开

极简进度条

极简扁平的设计进度条组件,色彩柔和,适用于专业商业或企业网站。它具有响应式设计并支持使用 Tailwind CSS 的暗模式。

打开