Progress

Used to display the current progress of an operation.

Basic Usage

Set the progress bar percentage through the value attribute.

50%

在 github 中打开

展开代码

复制代码

<template>
  <ol-progress class="w-70 h-2" :value="50" />
</template>

Displaying Labels

Setting the label attribute can display a percentage label on the right side of the progress bar.

50%

在 github 中打开

展开代码

复制代码

<template>
  <ol-progress class="w-70 h-2" :value="50" label />
</template>

Reverse Progress Bar

Setting the reverse attribute can make the progress bar display from right to left.

60%

在 github 中打开

展开代码

复制代码

<template>
  <ol-progress class="w-70 h-2" :value="60" reverse label />
</template>

Customizing Label Content

The label slot can be used to customize the label content.

在 github 中打开

展开代码

复制代码

<template>
  <ol-progress class="w-70 h-2" :value="70" label>
    <template #label>
      <ol-icon icon="i-mi-heart" />
    </template>
  </ol-progress>
</template>

Attributes

Attribute Name	Description	Type	Default Value
value	Progress percentage	number	0
reverse	Whether to reverse	boolean	false
label	Whether to display labels	boolean	false

Slots

Slot Name	Description
label	Custom label content