import{_ as e,E as n,c as h,o as l,aR as p,I as t,a as s,w as a}from"./chunks/framework.C7RrxATG.js";const b=JSON.parse('{"title":"Progress","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/component/progress.md","filePath":"en-US/component/progress.md","lastUpdated":1762249100000}'),r={name:"en-US/component/progress.md"},d=p(`

Progress ​

Used to display the current progress of an operation.

Basic Usage ​

Set the percentage using percentage.

html
<wd-progress :percentage="30" />

Hide Progress Text ​

Set hide-text to hide the progress text.

html
<wd-progress :percentage="60" hide-text></wd-progress>

Set Status ​

Set status to inform users of the current state and expectations.

html
<wd-progress :percentage="100" hide-text status="success" />
<wd-progress :percentage="70" hide-text status="danger" />

Modify Color ​

Set color to modify the progress bar color.

html
<wd-progress :percentage="80" color="#00c740"></wd-progress>

color can also be set as an array or function. If only colors are passed in the array, the progress boundaries for each color are automatically calculated. A function needs to return a color value.

html
<wd-progress :percentage="100" :color="['#00c740', '#ffb300', '#e2231a', '#0083ff']" />

The array can also be set in the following format:

html
<wd-progress :percentage="percentage" :color="colorObject" />
typescript
import type { ProgressColor } from '@/uni_modules/wot-design-uni/components/wd-progress/types'

const colorObject = ref<ProgressColor>([
  {
    color: 'yellow',
    percentage: 30
  },
  {
    color: 'red',
    percentage: 60
  },
  {
    color: 'blue',
    percentage: 80
  },
  {
    color: 'black',
    percentage: 90
  }
])
const percentage = ref<number>(100)

Attributes ​

ParameterDescriptionTypeOptionsDefaultVersion
percentageProgress value, maximum 100number-0-
hide-textHide progress textboolean-false-
colorProgress bar colorstring / ProgressColor[] / string[]---
statusProgress bar statusstringsuccess / danger / warning--
durationMilliseconds needed for 1% increasenumber-30-

ProgressColor ​

FieldTypeDescriptionVersion
colorstringColor-
percentagenumberPercentage-

External Classes ​

Class NameDescriptionVersion
custom-classRoot node style-

Source Code ​

`,26);function k(o,E,g,c,y,u){const i=n("ExternalLink");return l(),h("div",null,[d,t(i,{href:"https://github.com/Moonofweisheng/wot-design-uni/tree/master/src/subPages/progress"},{default:a(()=>[s("Documentation")]),_:1}),s(" • "),t(i,{href:"https://github.com/Moonofweisheng/wot-design-uni/tree/master/src/uni_modules/wot-design-uni/components/wd-progress"},{default:a(()=>[s("Component")]),_:1})])}const C=e(r,[["render",k]]);export{b as __pageData,C as default};