如何使用Tailwind CSS创建自定义进度条

前言

最近在nextjs中使用axios 从阿里云oss下载文件的时候,需要一个实现文件下载的进度条需求。axios 本身就提供了两个配置选项onDownloadProgress/onUploadProgress,我们只需要获取到下载/上传的百分比 percentage 就可以了。

  onDownloadProgress: function (progressEvent) {
       {
          responseType: 'blob',
          onDownloadProgress: (progressEvent) => {
            const percentage = Math.round(
              (progressEvent.loaded * 100) / progressEvent.total
            );

          },
  },

  onUploadProgress: function (progressEvent) {
    // 和上传类似
  },

我们今天来着重讨论一下下载进度条的样式。

在提供视觉反馈和管理用户期望时，进度条传达一种完成感、减少焦虑并增加用户参与度。无论是文件上传、表单提交还是需要时间的操作，精心设计的进度条都可以让您了解情况并参与其中，从而带来更令人满意的用户体验。

1. 带圆角的基本进度条

这是最基础的进度条样式，带有圆角，易于集成。适用于常规的下载或上传进度指示。

<div class="mb-5 h-2 rounded-full bg-gray-200">
	<div class="h-2 rounded-full bg-green-500" style="width: 50%"></div>
</div>

alt text

上面给出的代码片段将生成一个带有灰色背景和绿色填充的进度条，表示进度为50%。查看现场演示，并根据您的要求随意修改测试。

应用场景:可以用在任何需要展示简单进度的场景中，比如文件下载进度、表单提交进度等。

2. 细长的尖角进度条

<div class="mb-5 h-1 bg-gray-200">
  <div class="h-1 bg-purple-500" style="width: 75%"></div>
</div>

alt text

上面给出的代码片段将创建一个更细的尖角进度条，具有灰色背景和紫色填充，代表进度为 75%。相比于基础的进度条，这种样式更加细长，适合在页面空间有限时使用

查看现场演示并随意修改测试。应用场景：适合用于需要低调显示的进度条，比如表单验证进度。

3.带标签的进度条

在进度条上添加标签可以提供额外的背景信息。我们可以通过在进度条内添加文本元素来实现这一点。

<div class="relative mb-5 h-2 rounded-full bg-gray-200">
  <div class="h-2 rounded-full bg-red-500" style="width: 25%"></div>
  <span class="absolute inset-0 flex items-center justify-center text-sm font-medium text-gray-900">25%</span>
</div>

alt text

此代码片段中，百分比标签位于进度条的中心，提供清晰的进度视觉表示。查看现场演示并随意修改测试。

应用场景：适用于需要明确告知用户当前进度的场景。

4. 动画进度条

如果想给进度条添加条纹动画效果，我们可以通过一些额外的 CSS 类来实现。

<div class="mb-5 h-2 overflow-hidden rounded-full bg-gray-200">
  <div class="h-2 animate-pulse rounded-full bg-gray-800" style="width: 50%">
    <div class="h-full w-full translate-x-full transform bg-white"></div>
  </div>
</div>

alt text

此代码片段创建了一个具有条纹动画效果的进度条。进度条填充了容器的 50%，条纹动画从左向右移动，以视觉方式显示进度。

查看现场演示并随意修改测试。

应用场景：适合用在文件上传或下载时，提供视觉上的反馈。

5. 带底部文字的直进度条

此进度条允许在显示进度的同时添加外部底部文本（进度百分比）。

<div class="relative mb-5 pt-1">
  <div class="mb-4 flex h-2 overflow-hidden rounded bg-gray-100 text-xs">
    <div style="width: 80%" class="bg-green-500"></div>
  </div>
  <div class="mb-2 flex items-center justify-between text-xs">
    <div class="text-gray-600">Progress</div>
    <div class="text-gray-600">100%</div>
  </div>
</div>

alt text

带底部文字的直线进度条在此代码片段中，百分比标签和文本位于进度条下方，提供清晰的进度视觉呈现。

查看现场演示并随意修改测试。应用场景：适用于展示复杂流程的进度，例如项目管理工具中的任务完成情况。

6. 垂直进度条

此进度条为垂直方向。flex-col该类用于将元素沿列方向对齐。

<div class="flex">
  <div class="mb-5 ml-5 flex flex-col items-center">
    <div class="h-24 w-5 overflow-hidden rounded-md bg-gray-300">
      <div class="h-full bg-yellow-800" style="height: 50%"></div>
    </div>
    <span class="mt-2 text-xs text-gray-600">50%</span>
  </div>
  <div class="mb-5 ml-5 flex flex-col items-center">
    <div class="h-24 w-10 overflow-hidden rounded-full bg-gray-300">
      <div class="h-full bg-yellow-500" style="height: 75%"></div>
    </div>
    <span class="mt-2 text-xs text-gray-600">75%</span>
  </div>
  <div class="mb-5 ml-5 flex flex-col items-center">
    <div class="h-24 w-10 overflow-hidden rounded-full bg-gray-200">
      <div class="h-full bg-gradient-to-t from-gray-200 via-blue-400 to-blue-600" style="height: 60%"></div>
    </div>
    <span class="mt-2 text-xs text-gray-600">60%</span>
  </div>
</div>

使用类来设置进度条的高度，通过使用类来h-24调整内部的高度来表示填充量。

查看现场演示并随意修改测试。

应用场景：适合在侧边栏或其他垂直布局的区域使用。

7. 温度计进度条

这个进度条的形状是一个圆角。

<div class="relative mb-5">
  <div class="rounded-full border border-red-500 p-1">
    <div class="flex h-6 items-center justify-center rounded-full bg-red-300 text-xs leading-none" style="width: 85%; height: 85%;">
      <span class="p-1 text-white">85%</span>
    </div>
  </div>
</div>

温度计进度条.png

这是一个不同的进度条，我们通过应用填充来制作它，如上面的代码片段所示。

div带有rounded-full和类的外部border创建圆形容器。进度根据指定的百分比进行填充，圆形形状是通过设置height和width使用百分比值来实现的。

我们还可以在 50% 或任何其他我们想要的位置添加一个圆圈。它将代表一些端点或目标点，以便轻松完成任务。

<div class="relative my-20 mx-5">
  <div class="rounded-full border border-red-500 p-1">
    <div class="flex h-6 items-center justify-center rounded-full bg-red-300 text-xs leading-none" style="width: 85%; height: 85%;">
      <span class="p-1 text-white">85%</span>
    </div>
  </div>
  <div class="absolute inset-0 flex items-center justify-center">
    <div class="h-8 w-8 rounded-full bg-red-500"></div>
  </div>
</div>

带中间圆形边缘的温度计进度条.png 带中间圆边的温度计进度条内部div代表进度，并使用absolute外部容器内的类进行定位。

查看现场演示并随意修改测试。

应用场景：适用于需要展示逐步填充效果的地方，例如用户评分、投票进度等。

8. 多色进度条

该进度条分为多个不同颜色的部分，每个部分代表特定的进度百分比。

<div class="relative my-20 mx-5 pt-1">
  <div class="mb-4 flex h-2 overflow-hidden rounded bg-gray-100 text-xs">
    <div style="width: 10%" class="bg-green-500 transition-all duration-500 ease-out"></div>
    <div style="width: 25%" class="bg-yellow-500 transition-all duration-500 ease-out"></div>
    <div style="width: 20%" class="bg-red-500 transition-all duration-500 ease-out"></div>
  </div>
  <div class="mb-2 flex items-center justify-between text-xs">
    <div class="text-gray-600">Progress</div>
    <div class="text-gray-600">100%</div>
  </div>
</div>

多色进度条.png

在此代码片段中，我们使用三种不同颜色表示不同的百分比。它使用不同的颜色表示总体进度和子任务进度。

每个部分都由单独的类定义div，bg-green-500宽度使用百分比值设置。不同的部分可以有不同的颜色，我们可以根据需要调整部分的数量及其宽度。

查看现场演示并随意修改测试。

9.渐变进度条

此进度条利用渐变效果来实现颜色的平滑过渡。

<div class="mb-5 h-4 overflow-hidden rounded-full bg-gray-200">
  <div class="h-4 animate-pulse rounded-full bg-gradient-to-r from-green-500 to-blue-500" style="width: 75%"></div>
</div>

alt text

该类bg-gradient-to-r从左到右应用渐变，以指定的颜色开始from-green-500，以指定的颜色结束to-blue-500。w-1/2该类将每个渐变部分的宽度设置为 50%，从而创建两个相等的段。

我们还可以修改任何样式，以便更具交互性地显示任务的进度，

<div class="relative mb-5 h-5 rounded-full bg-gray-200">
  <div class="h-full animate-pulse rounded-full bg-blue-500" style="width: 75%">
    <span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-white">75%</span>
  </div>
</div>

alt text 带进度百分比的进度条查看现场演示。应用场景：适用于展示多项子任务的完成情况。

10. 多色多段进度条

该进度条分为多色部分，每个部分代表进度的特定百分比。

<div class="relative">
  <div class="mb-4 flex h-5 overflow-hidden rounded bg-gray-100 text-xs">
    <div class="flex flex-col justify-center bg-red-500 text-white" style="width: 25%;">
      <span class="text-center">25%</span>
    </div>
    <div class="flex flex-col justify-center bg-red-400 text-white" style="width: 25%;">
      <span class="text-center">25%</span>
    </div>
    <div class="flex flex-col justify-center bg-red-300 text-white" style="width: 25%;">
      <span class="text-center">25%</span>
    </div>
    <div class="flex flex-col justify-center bg-red-200 text-white" style="width: 25%;">
      <span class="text-center">25%</span>
    </div>
  </div>
  <div class="mb-2 flex items-center justify-between text-xs">
    <div class="text-gray-600">Progress</div>
    <div class="text-gray-600">100%</div>
  </div>
</div>

alt text 多颜色、多部分的进度条在此代码片段中，我们设计了具有不同颜色和进度百分比的进度步骤。此外，底部栏文本表示总体进度，内部文本表示步骤的进度。

每个部分都由单独的类定义div，bg-red-500宽度使用百分比值设置。不同的部分可以有不同的颜色，我们可以根据需要调整部分的数量及其宽度。

查看现场演示。

这些只是使用 Tailwind CSS 创建的进度条的几个示例。通过组合各种实用程序类并自定义样式，您可以创建符合您的设计要求的进度条。

结论

在这篇博客中，我们探讨了如何利用 Tailwind CSS 快速创建多种类型的进度条。这些进度条样式从简单的圆角和条形开始，到复杂的带动画和多色分段，为您的项目提供了丰富的视觉反馈。希望这些示例能帮助您更轻松地实现所需的进度指示器。继续探索 Tailwind CSS 的潜力，创造更加吸引人的用户体验！

微信公众号