组件 进度条 进度条组件

进度条组件

一个响应式进度条组件,设计用于暗模式,使用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>

相关组件

玻璃态进度条

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

打开

进度条组件

一个简单的进度条组件,采用玻璃摩尔主义和单色配色方案,适合商业和企业网站,支持暗模式。

打开

拟物化进度条

用于投资组合的拟物化进度条组件,具有单色配色方案和复杂的交互式设计,并使用 Tailwind CSS 提供响应式和深色模式支持。

打开