进度条 Progress

给予用户当前系统执行中任务运行状态的反馈，多用于运行一段时间的场景，有效减轻用户在等待中产生的焦虑感。

基本用法

简单的进度条。

45%

<template>
  <div class="box">
    <sb-progress width="50%" :percent="45" />
  </div>
</template>

进度条状态

通过 status 指定进度条状态

10%

<template>
  <div class="box">
    <sb-progress width="50%" :percent="percent" status="normal" />
    <sb-progress width="50%" :percent="percent" status="success" />
    <sb-progress width="50%" :percent="percent" status="warning" />
    <sb-progress width="50%" :percent="percent" status="danger" />
    <div class="list">
      <sb-progress type="circle" :width="60" :percent="percent" status="normal" />
      <sb-progress type="circle" :width="60" :percent="percent" status="success" />
      <sb-progress type="circle" :width="60" :percent="percent" status="warning" />
      <sb-progress type="circle" :width="60" :percent="percent" status="danger" />
    </div>
    <sb-button @click="percent += 10">+10</sb-button>
    <sb-button style="margin-left: 10px" @click="percent -= 10">-10</sb-button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
let percent = ref(10);
let status = ref('warning');
</script>

<style scoped>
.list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 20px 0;
}

.list > *:not(:first-child) {
  margin-left: 10px;
}
</style>

环形进度条

设置 type="circle" 将会展示环形进度条。

40%

<template>
  <div class="box">
    <sb-progress 
      :width="150" 
      :percent="40" 
      type="circle"
    />
  </div>
</template>

进度条大小

通过 size 设置进度条的大小。

10%

<template>
  <div class="box">
    <sb-progress width="50%" :percent="percent" size="small" />
    <sb-progress width="50%" :percent="percent" size="medium" />
    <sb-progress width="50%" :percent="percent" size="large" />
    <br />
    <sb-button @click="percent += 10">+10</sb-button>
    <sb-button style="margin-left: 10px" @click="percent -= 10">-10</sb-button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
let percent = ref(10);
let status = ref('warning');
</script>

渐变进度条

color 传入数组时，会作为 linear-gradient 的属性值设置渐变色，数组格式如下所示：

interface LinearGradient {
  offset: Percent,
  color: RGB | HEX
}
const color: LinearGradient[]= [......];

60%

<template>
  <div class="box">
    <sb-progress 
      :width="500" 
      :percent="60" 
      :color="colorObj"
    />
    <br />
    <sb-progress 
      type="circle"
      :width="100" 
      :percent="60" 
      :color="colorObj"
    />
  </div>
</template>

<script setup>
const colorObj = [
  {
    offset: "0%",
    color: "#257cff7f",
  },
  {
    offset: "100%",
    color: "#165dff",
  },
];
</script>

自定义进度条的颜色

可以通过 color 设置进度条的颜色，通过 trackColor 设置剩余进度条的颜色。

60%

<template>
  <div class="box">
    <sb-progress 
      width="50%" 
      :percent="percent" 
      :color="color" 
      :track-color="trackColor" 
    />
    <br />
    <sb-progress 
      type="circle"
      width="50" 
      :percent="percent" 
      :color="color" 
      :track-color="trackColor" 
    />
  </div>
</template>

<script setup>
const percent = 60;
const color = "#165dff";
const trackColor="#e7f3ff" 
</script>

API

`<progress>` Props

参数名	描述	类型	默认值
type	进度条的类型	`'line' \| 'circle'`	`'line'`
size	进度条的大小	`'small' \| 'medium' \| 'large'`	`'medium'`
percent	进度条当前的百分比	`number`	`0`
stroke-width	进度条的线宽	`number`	`-`
width	进度条的长度	`number \| string`	`-`
color	进度条的颜色	`string \| array`	`-`
track-color	进度条的轨道颜色	`string`	`-`
show-text	是否显示文字	`boolean`	`true`
status	进度条状态	`'normal' \| 'success' \| 'warning' \| 'danger'`	`-`
round	进度条是否有圆角	`boolean`	`true`

💡 友情提示

其中的 percent 属性分为三个区间，当传入的数值小于 0 时取 0，当大于 100 时取 100，当在 0 ～ 1 直接的时候乘 10 作为占比，当处于 1 ～ 100 时按 1:1 占比

进度条 Progress #

基本用法 #

进度条状态 #

环形进度条 #

进度条大小 #

渐变进度条 #

自定义进度条的颜色 #

API #

<progress> Props #