组件 进度条 进度条组件

进度条组件

一个为黑暗模式设计的响应式进度条组件,具有柔和的色彩方案,适合商业/企业网站。

预览

HTML 代码

<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-md">
    <h2 class="text-white text-lg font-semibold mb-4">Progress Bar</h2>
    <div class="relative pt-1">
        <div class="flex justify-between mb-1 text-sm text-white">
            <span>0%</span>
            <span>100%</span>
        </div>
        <div class="h-2 bg-gray-600 rounded">
            <div class="bg-pastel-green-500 h-full rounded" style="width: 70%;"></div>
        </div>
    </div>
    <div class="flex items-center justify-between mt-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
            <span class="text-white">John Doe</span>
        </div>
        <span class="text-gray-400 dark:text-gray-500">In Progress</span>
    </div>
</div>

相关组件

黑暗模式进度条组件

一个响应式黑暗模式进度条组件,适用于商业/企业网站,使用鲜艳的颜色和互动元素。

打开

进度条组件

一个响应式进度条组件,设计有 3D 元素,使用适合电子商务的类似配色方案,支持深色模式

打开

极简进度条

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

打开