组件 进度条 新拟态进度条

新拟态进度条

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

预览

HTML 代码

<!-- Light Mode -->
<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800">
  <div class="w-64 h-4 bg-gray-300 rounded-full shadow-inner dark:bg-gray-700 dark:shadow-inner-dark">
    <div class="w-3/4 h-full text-center text-xs text-white bg-blue-500 rounded-full dark:bg-blue-600" style="width: 75%;">
    </div>
  </div>
</div>

<!-- Dark Mode (example - activate dark mode in your Tailwind config) -->
<div class="flex items-center justifies-center min-h-screen bg-gray-800">
  <div class="w-64 h-4 bg-gray-700 rounded-full shadow-inner-dark">
    <div class="w-3/4 h-full text-center text-xs text-white bg-blue-600 rounded-full" style="width: 75%;">
    </div>
  </div>
</div>

相关组件

Neumorphism 进度条

用于电子档案夹的 Neumorphism 样式进度条,具有柔和的配色方案、适度的复杂性、响应能力和深色主题支持。不包含 JavaScript;该组件是使用 HTML 和 Tailwind CSS 构建的。

打开

玻璃态进度条

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

打开

进度条组件

一个响应式进度条组件,设计用于暗模式,使用Tailwind CSS,适合现代Web应用程序。

打开