组件 进度条 进度条组件

进度条组件

一个响应式的进度条组件,考虑了深色模式,使用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>

相关组件

ProgressBarComponent (进度条组件)

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

打开

极简进度条

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

打开

3D 灰度运动健身进度条

一个复杂的 3D 灰度进度条组件,专为运动和健身应用程序而设计,以深度和视觉参与度显示训练进度。它包括深色模式支持并且完全响应。

打开