组件 进度条 新拟态进度条

新拟态进度条

带有拟物设计的进度条组件,具有响应效果和深色主题支持,使用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>

相关组件

Bauhaus 进度条组件

一个中等复杂度、响应迅速、受包豪斯启发的进度条组件,适用于娱乐/媒体平台,具有酷炫的中性色和深色模式支持。

打开

三重深色模式进度条

用于深色模式的简单三色进度条组件,适用于博客和内容使用。它具有 Tailwind CSS 的响应式设计,利用 dark: 前缀来支持深色主题,而无需 JavaScript。

打开

ProgressBarComponent (进度条组件)

一个简单、干净且响应迅速的进度条组件,具有适用于食品/餐厅网站的霓虹灯/电色,具有深色模式支持和瑞士/国际排版设计。

打开