进度条

一个响应式进度条组件，为电子商务提供深色模式支持，具有鲜艳的配色方案和简单的布局。

预览

HTML 代码

<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 relative overflow-hidden">
  <div class="bg-indigo-600 h-4 rounded-full dark:bg-indigo-400" style="width: 75%;">
    <span class="absolute right-2 top-0 h-full flex items-center text-white text-xs font-bold">75%</span>
  </div>
</div>

相关组件

3D进度条组件

一个为社交网络界面设计的响应式进度条组件，具有3D效果，单色调配色方案和黑暗模式支持，使用Tailwind CSS构建。

打开

Organic_Nature_ProgressBar

一个以自然为灵感、以复古为主题的进度条组件，适用于工业和制造应用，具有流畅的线条、柔和的色彩和深色模式支持。

打开

新拟态进度条

带有拟物设计的进度条组件，具有响应效果和深色主题支持，使用Tailwind CSS。

打开