Progress 进度条

响应式进度条组件。

行内 Tailwind/UnoCSS 用法

使用行内的tailwind/unocss样式构建，复制组件的代码即可使用

基础进度条

45%

带标签进度条

进度45%

带步骤进度条

申请

审批

完成

查看代码

<template>
  <div class="flex flex-col gap-4">
    <p>
      基础进度条
    </p>
    <!-- 基础进度条 -->
    <div class="h-2.5 w-full rounded-full bg-gray-200">
      <div class="h-2.5 rounded-full bg-blue-600 transition" :style="{ width: '45%' }" />
    </div>

    <!-- 带数字进度条 -->
    <div class="h-4 w-full rounded-full bg-gray-200">
      <div class="h-4 rounded-full bg-blue-600 px-1 text-center text-[10px] leading-4 text-white transition" :style="{ width: '45%' }">
        45%
      </div>
    </div>

    <p>
      带标签进度条
    </p>
    <!-- 带标签进度条 -->
    <div>
      <div class="mb-1 flex justify-between">
        <span class="text-sm font-medium text-blue-700">进度</span>
        <span class="text-sm font-medium text-blue-700">45%</span>
      </div>
      <div class="h-2.5 w-full rounded-full bg-gray-200">
        <div class="h-2.5 rounded-full bg-blue-600 transition" :style="{ width: '45%' }" />
      </div>
    </div>

    <p>
      带步骤进度条
    </p>
    <!-- 带步骤进度条 -->
    <div class="relative">
      <div class="mb-2 flex justify-between text-xs font-medium">
        <div class="w-1/3">
          申请
        </div>
        <div class="w-1/3 text-center">
          审批
        </div>
        <div class="w-1/3 text-right">
          完成
        </div>
      </div>
      <div class="mb-6 h-2.5 w-full rounded-full bg-gray-200">
        <div class="h-2.5 rounded-full bg-blue-600 transition" :style="{ width: '50%' }" />
      </div>
    </div>
  </div>
</template>

CSS 类用法

使用预定义的CSS类。复制index.css的样式即可使用

进度45%

申请

审批

完成

查看代码

html

<template>
  <div class="flex flex-col gap-4">
    <!-- 基础进度条 -->
    <div class="progress-bar">
      <div class="progress-bar-fill" :style="{ width: '45%' }" />
    </div>

    <!-- 带标签进度条 -->
    <div class="progress-with-label">
      <div class="progress-label">
        <span>进度</span>
        <span>45%</span>
      </div>
      <div class="progress-bar">
        <div class="progress-bar-fill" :style="{ width: '45%' }" />
      </div>
    </div>

    <!-- 带步骤进度条 -->
    <div class="progress-with-steps">
      <div class="steps-label">
        <div class="step">
          申请
        </div>
        <div class="step">
          审批
        </div>
        <div class="step">
          完成
        </div>
      </div>
      <div class="progress-bar">
        <div class="progress-bar-fill" :style="{ width: '50%' }" />
      </div>
    </div>
  </div>
</template>

<style lang="css" scoped>
  @import './index.css';
</style>

index.css

.progress-bar {
  @apply w-full bg-gray-200 rounded-full h-2.5;

  .progress-bar-fill {
    @apply transition bg-blue-600 h-2.5 rounded-full;
  }
}

.progress-with-label {
  .progress-label {
    @apply flex justify-between mb-1;

    span {
      @apply text-sm font-medium text-blue-700;
    }
  }
}

.progress-with-steps {
  @apply relative;

  .steps-label {
    @apply flex mb-2 justify-between text-xs font-medium;

    .step {
      @apply w-1/3;

      &:nth-child(2) {
        @apply text-center;
      }

      &:last-child {
        @apply text-right;
      }
    }
  }

  .progress-bar {
    @apply h-2.5 mb-6;
  }
}