Progress

Progress is used to show the progress of current operation, and inform the user the current status.

Basic Usage

50%

Viwer Source

Code

```vue
<template>
  <el-card class="box-card">
    <FieldProgress :percentage="50" :textInside="true" />
  </el-card>
</template>
```

:::

Internal percentage

In this case the percentage takes no additional space
stroke-width attribute decides the width of progress bar, and use text-inside attribute to put description inside the progress bar.

70%

100%

80%

50%

Viwer Source

Code

```vue
<template>
  <el-card class="box-card">
    <FieldProgress
      :textInside="true"
      :strokeWidth="22"
      :percentage="80"
    />
    <FieldProgress
      :textInside="true"
      :strokeWidth="22"
      :percentage="80"
      status="success"
    />
    <FieldProgress
      :textInside="true"
      :strokeWidth="22"
      :percentage="80"
      status="warning"
    />
    <FieldProgress
      :textInside="true"
      :strokeWidth="22"
      :percentage="80"
      status="exception"
    />
  </el-card>
</template>
```

:::

Circular progress bar

You can specify type attribute to circle to use circular progress bar, and use width attribute to change the size of circle.

0%

25%

Viwer Source

Code

```vue
<template>
  <el-card class="box-card">
    <FieldProgress
      type="circle"
      :percentage="0"
      :textInside="true"
    />
    <FieldProgress
      type="circle"
      :percentage="25"
      :textInside="true"
    />
    <FieldProgress
      type="circle"
      :percentage="25"
      status="success"
      :textInside="true"
    />
    <FieldProgress
     type="circle"
      :percentage="25"
      status="warning"
      :textInside="true"
    />
    <FieldProgress
     type="circle"
      :percentage="25"
      :textInside="true"
      status="exception"
    />
  </el-card>
</template>
```

:::

Props

Name	Description	Type	Mandatory
percentage	percentage.	number	True
textInside	whether to place the percentage inside progress bar, only works when type is 'line'.	Boolean	True

Attributes

Name	Description	Type	Default
type	the type of progress bar line/circle/dashboard	String	line
strokeWidth	the width of progress bar	number	6
status	the current status of progress bar success/exception/warning	String	────
indeterminate	set indeterminate progress	Boolean	False

Example for Developer

Open in StackBlitz

Directory

  └─ src                                            # Main source code.
      └── Components                                # Global components
              └── Atoms                             # Atom components
                  └── FieldProgress                 # Field Progress specific components.