进度条 Progress

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

基本用法

简单的进度条。

---

代码事例

<template>
  <fk-progress :percent="0.2" :style="{width:'50%'}" />
  <br/>
  <br/>
  <fk-progress :percent="0.3" :style="{width:'50%'}">
    <template #text="scope" >
      进度 {{scope.percent * 100}}%
    </template>
  </fk-progress>
</template>

进度条状态

通过 status 指定进度条状态

---

代码事例

<template>
  <fk-space direction="vertical" :style="{width: '50%'}">
    <fk-progress :percent="percent" />
    <fk-progress status='warning' :percent="percent" />
    <fk-progress status='danger' :percent="percent" />
  </fk-space>
  <div :style="{marginTop:'20px'}">
    <fk-slider v-model="percent" :max="1" :step="0.1" :style="{width: '150px'}" />
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const percent = ref(0.2);

    return {
      percent
    }
  },
}
</script>

环形进度条

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

---

代码事例

<template>
  <fk-space size="large">
    <fk-progress type="circle" :percent="percent" />
    <fk-progress type="circle" status='warning' :percent="percent" />
    <fk-progress type="circle" status='danger' :percent="percent" />
    <fk-progress type="circle" status='success' :percent="percent" />
  </fk-space>
  <div :style="{marginTop:'20px'}">
    <fk-slider v-model="percent" :max="1" :step="0.1" :style="{width: '150px'}" />
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const percent = ref(0.2);

    return {
      percent
    }
  },
}
</script>

迷你进度条

设置 size="mini" 展示微型进度条。

---

代码事例

<template>
  <fk-space size="large" :style="{width: '100%'}">
    <fk-progress size="mini" :percent="percent"/>
    <fk-progress size="mini" status='warning' :percent="percent"/>
    <fk-progress size="mini" status='danger' :percent="percent"/>
    <fk-progress size="mini" status='success' :percent="percent"/>
  </fk-space>
  <fk-space size="large" :style="{width: '100%', marginTop: '20px'}">
    <fk-progress type="circle" size="mini" :percent="percent"/>
    <fk-progress type="circle" size="mini" status='warning' :percent="percent"/>
    <fk-progress type="circle" size="mini" status='danger' :percent="percent"/>
    <fk-progress type="circle" size="mini" status='success' :percent="percent"/>
  </fk-space>
  <div :style="{marginTop: '20px'}">
    <fk-slider v-model="percent" :max="1" :step="0.1" :style="{width: '150px'}" />
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const percent = ref(0.2);

    return {
      percent
    }
  },
}
</script>

进度条大小

通过 size 设置进度条的大小

---

代码事例

<template>
  <fk-space direction="vertical" size="large" :style="{width:'50%'}">
    <fk-radio-group v-model="size" type="button">
      <fk-radio value="small">Small</fk-radio>
      <fk-radio value="medium">Medium</fk-radio>
      <fk-radio value="large">Large</fk-radio>
    </fk-radio-group>
    <fk-progress :size="size" :percent="0.2"/>
    <fk-progress status='warning' :size="size" :percent="0.2"/>
    <fk-progress status='danger' :size="size" :percent="0.2"/>
    <fk-space>
      <fk-progress type="circle" :size="size" :percent="0.2"/>
      <fk-progress type="circle" status='warning' :size="size" :percent="0.2"/>
      <fk-progress type="circle" status='danger' :size="size" :percent="0.2"/>
    </fk-space>
  </fk-space>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    return {
      size: ref('medium')
    }
  }
}
</script>

渐变进度条

color 传入对象时， 会作为 linear-gradient 的属性值设置渐变色。

---

代码事例

<template>
  <div>
    <fk-progress
      :percent="0.8"
      :style="{ width: '50%' }"
      :color="{
        '0%': 'rgb(var(--primary-6))',
        '100%': 'rgb(var(--success-6))',
      }"
    />
    <br/>
    <br/>

    <fk-progress
      :percent="1"
      :style="{ width: '50%' }"
      :color="{
        '0%': 'rgb(var(--primary-6))',
        '100%': 'rgb(var(--success-6))',
      }"
    />
    <br/>
    <br/>
    <fk-space size="large">
      <fk-progress
        type="circle"
        :percent="0.8"
        :style="{ width: '50%' }"
        :color="{
          '0%': 'rgb(var(--primary-6))',
          '100%': 'rgb(var(--success-6))',
        }"
      />

      <fk-progress
        type="circle"
        :percent="1"
        :style="{ width: '50%' }"
        :color="{
          '0%': 'rgb(var(--primary-6))',
          '100%': 'rgb(var(--success-6))',
        }"
      />
    </fk-space>
  </div>
</template>

步骤进度条

通过设置 steps 展示步骤进度条。

---

代码事例

<template>
  <div :style="{ width: '50%' }">
    <fk-progress :steps="3" :percent="0.3" />
    <fk-progress :steps="5" status="warning" :percent="1" />
    <fk-progress :steps="3" size="small" :percent="0.3" />
  </div>
</template>

剩余进度条的颜色

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

---

代码事例

<template>
  <div :style="{ width: '50%' }">
    <fk-progress
      :percent="0.4"
      track-color="var(--color-primary-light-1)"
      style="margin-bottom: 20px;"
    />
    <fk-progress
      :percent="0.4"
      :steps="4"
      track-color="var(--color-primary-light-1)"
      style="margin-bottom: 20px;"
    />
    <fk-progress
      :percent="0.4"
      type="circle"
      track-color="var(--color-primary-light-1)"
      style="margin-bottom: 20px;"
    />
  </div>
</template>

API

<progress> Props

参数名	描述	类型	默认值
type	进度条的类型	'line' | 'circle'	'line'
size	进度条的大小	'mini' | 'small' | 'medium' | 'large'	'medium'
percent	进度条当前的百分比	number	0
steps	开启步骤条模式，并设置步骤数	number	0
animation	是否开启过渡动画	boolean	false
stroke-width	进度条的线宽	number	-
width	进度条的长度	number|string	-
color	进度条的颜色	string|object	-
track-color	进度条的轨道颜色	string	-
show-text	是否显示文字	boolean	true
status	进度条状态	'normal' | 'success' | 'warning' | 'danger'	-