材料设计自然进度条

一个以材料设计为灵感的进度条，使用大地色调，适用于社交媒体界面。它是响应式的，并且使用Tailwind CSS包括黑暗模式支持。

预览

HTML 代码

<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
  <div class="bg-green-700 h-2.5 rounded-full dark:bg-green-500" style="width: 45%"></div>
</div>

相关组件

新拟态进度条

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

打开

进度条组件

一个复杂的响应式进度条组件，适用于政府/公共服务，采用简洁、简约的设计，采用单色调色板和明亮的强调，支持深色模式，并提供详细的进度信息。

打开

3D进度条组件

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

打开