组件 进度条 三重深色模式进度条

三重深色模式进度条

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

预览

HTML 代码

<div class="dark:bg-gray-900 p-4">
  <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Reading Progress</h2>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4">
    <div class="dark:bg-purple-500 h-2.5 rounded-full" style="width: 45%;"></div>
  </div>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4">
    <div class="dark:bg-yellow-500 h-2.5 rounded-full" style="width: 60%;"></div>
  </div>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
    <div class="dark:bg-emerald-500 h-2.5 rounded-full" style="width: 75%;"></div>
  </div>
</div>

相关组件

电子商务订单进度条

一个用于电子商务的响应式进度条组件,支持深色模式,采用单色设计。没有 JavaScript,只有 HTML 和 Tailwind CSS。

打开

3D进度条组件

一个为社交网络界面设计的响应式进度条组件,具有3D效果,单色调配色方案和黑暗模式支持,使用Tailwind CSS构建。

打开

轮廓式进度条

一个采用新拟态风格设计的响应式进度条组件,使用Tailwind CSS,支持明暗两种主题。

打开