CCHub Tailwind Collection

组件进度条轮廓式进度条

轮廓式进度条

一个采用新拟态风格设计的响应式进度条组件，使用Tailwind CSS，支持明暗两种主题。

预览

HTML 代码

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4">
    <div class="w-64 bg-gray-200 dark:bg-gray-900 rounded-full shadow-lg p-1">
        <div class="bg-gradient-to-r from-blue-500 to-blue-700 h-4 rounded-full" style="width: 70%;"></div>
    </div>
    <span class="mt-2 text-gray-700 dark:text-gray-300">70%</span>
</div>

相关组件

极简进度条

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

打开

进度条

一个具有微交互设计的进度条组件。包括响应效果和仅使用HTML和CSS（Tailwind CSS）的深色主题支持。

打开

进度条组件

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

打开