组件 进度条 进度条组件

进度条组件

一个响应式的进度条组件,考虑了深色模式,使用Tailwind CSS.

预览

HTML 代码

<div class="flex items-center justify-center h-screen bg-gray-900">
  <div class="w-full max-w-md">
    <h2 class="text-white text-lg font-semibold mb-4">Progress Bar</h2>
    <div class="relative pt-1">
      <div class="flex items-center justify-between mb-2">
        <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200">
          70%
        </span>
        <span class="text-xs font-semibold inline-block text-gray-400">
          7/10
        </span>
      </div>
      <div class="h-2 bg-gray-700 rounded">
        <div class="h-full bg-teal-500 rounded" style="width: 70%;"></div>
      </div>
    </div>
    <p class="text-gray-400 text-sm mt-2">Loading...</p>
  </div>
</div>

相关组件

进度条组件

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

打开

玻璃态进度条

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

打开

新拟态进度条

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

打开