组件 进度指示器 玻璃化进度指示器组件

玻璃化进度指示器组件

玻璃态进度指示器组件,具有鲜艳的色彩方案和简单的复杂度。

预览

HTML 代码

<div class="flex flex-col items-center justify-center min-h-screen dark:bg-gray-900">
  <div class="dark:bg-gray-800 bg-white bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg dark:backdrop-blur-lg rounded-lg p-6 shadow-xl dark:shadow-xl">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Progress</h2>
    <div class="w-64 h-4 bg-gray-300 rounded-full overflow-hidden dark:bg-gray-700">
      <div class="h-full bg-gradient-to-r from-cyan-400 to-blue-500 dark:from-cyan-600 dark:to-blue-700 w-3/4 rounded-full"></div>
    </div>
    <p class="text-sm text-gray-700 dark:text-gray-300 mt-2">75% Complete</p>
  </div>
</div>

相关组件

进度指示器组件

响应式进度指示器组件,专为具有类似配色方案的深色模式 UI 仪表板而设计。它包括各种进度指示器,如条形图、圆圈和活动源,所有这些都使用 Tailwind CSS 设置样式以支持深色模式。不使用 JavaScript。

打开

3D进度条组件

具有3D效果、Tailwind CSS、响应式设计和暗黑模式支持的样式。

打开

进度指示器组件 33

一种响应式进度指示器,具有Tailwind CSS中的微交互,支持黑暗主题。

打开