组件 进度条 进度条组件

进度条组件

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

预览

HTML 代码

<div class="flex flex-col items-center justify-center h-screen bg-gray-900 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 bg-opacity-30 backdrop-blur-md border border-gray-500 rounded-lg p-6 shadow-lg w-1/2">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Progress</h2>
        <div class="relative w-full h-4 rounded-full bg-gray-300 dark:bg-gray-600">
            <div class="absolute top-0 left-0 h-4 rounded-full bg-blue-500" style="width: 70%;"></div>
        </div>
        <span class="text-base text-gray-800 dark:text-gray-200 mt-2">70%</span>
    </div>
</div>

相关组件

进度条组件

一个响应式的进度条组件,考虑了深色模式,使用Tailwind CSS.

打开

Glassmorphism_EarthTones_ProgressBar_ForumComponent

具有大地色调的响应式 glassmorphism 进度条组件,适用于论坛或社区平台。具有磨砂玻璃般的半透明元素,具有模糊效果和暗模式支持。

打开

ProgressBarComponent (进度条组件)

一个简单、干净且响应迅速的进度条组件,具有适用于食品/餐厅网站的霓虹灯/电色,具有深色模式支持和瑞士/国际排版设计。

打开