Progress 进度条请使用手机扫码体验

展示操作或任务的当前进度,比如上传文件。

基本用法

  1. html
    <nut-progress
  2. percentage="30"
  3. >
  4. </nut-progress>

设置高度和颜色

  1. html
    <nut-progress
  2. percentage="30"
  3. strokeColor="#8e71c7"
  4. strokeWidth="12"
  5. >
  6. </nut-progress>

设置百分比不显示

  1. html
    <nut-progress
  2. percentage="50"
  3. :showText="false"
  4. >
  5. </nut-progress>

设置百分比内显

  1. html
    <nut-progress
  2. percentage="60"
  3. :textInside="true"
  4. strokeWidth="24"
  5. ></nut-progress>

设置状态显示

  1. html
    <nut-progress
  2. percentage="30"
  3. strokeColor="#f30"
  4. status="active"
  5. >
  6. </nut-progress>
  7. <nut-progress
  8. percentage="50"
  9. strokeColor="#f30"
  10. strokeWidth="15"
  11. status="wrong"
  12. >
  13. </nut-progress>
  14. <nut-progress
  15. percentage="100"
  16. :strokeWidth="15"
  17. status="success"
  18. >
  19. </nut-progress>

自定义尺寸

内置 smallbaselarge 三种规格供使用。

  1. html
    <nut-progress
  2. size="small"
  3. >
  4. </nut-progress>
  5. <nut-progress
  6. size="base"
  7. >
  8. </nut-progress>
  9. <nut-progress
  10. size="large"
  11. >
  12. </nut-progress>

Prop

字段说明类型默认值
percentage百分比Number0
strokeColor进度条背景色String#1890ff
strokeWidth进度条高度String''
size进度条及文字尺寸,可选值small/base/largeString-
showText是否显示进度条文字内容Booleantrue
textInside进度条文字显示位置Booleanfalse
status进度条当前状态,可选值text/active/wrong/successStringtext