玻璃态进度条

一款玻璃形态风格的进度条，专为社交媒体界面设计，特色鲜艳色彩并支持暗模式。布局简单，无需JavaScript。

预览

HTML 代码

<div class="w-full bg-gray-200 bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-full h-4 dark:bg-gray-700 dark:bg-opacity-20 dark:backdrop-filter dark:backdrop-blur-lg">
  <div class="bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 h-4 rounded-full" style="width: 75%;"></div>
</div>

相关组件

极简进度条

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

打开

进度条组件

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

打开

电子商务专业进度条

专为电子商务设计的复杂响应式进度条组件，具有秋季配色方案（浓郁的橙色、棕色、勃艮第色）并支持深色模式。它为企业环境提供了干净、专业的外观。

打开