Progress NEW

The Progress component allows you to view the progress of any activity.

Basic usage

You can control the current percentage of progress.

75%

55%

35%

<template>
  <div flex flex-col gap-2 class="w-1/2">
    <o-progress :percentage="75" />
    <o-progress :percentage="55" />
    <o-progress :percentage="35" />
  </div>
</template>

<template>
  <div flex flex-col gap-2 class="w-1/2">
    <o-progress :percentage="75" />
    <o-progress :percentage="55" />
    <o-progress :percentage="35" />
  </div>
</template>

StrokeWidth

You can set the height of the progress bar using the stroke-width property.

You can also use the text-inside property to embed text inside the progress bar.

70%

<template>
  <div flex flex-col gap-2 class="w-1/2">
    <o-progress :percentage="70" stroke-width="xs" />
    <o-progress :percentage="70" stroke-width="sm" />
    <o-progress :percentage="70" stroke-width="md" />
    <o-progress :percentage="70" stroke-width="lg" />
    <o-progress :percentage="70" :stroke-width="20" />
    <o-progress :percentage="70" :stroke-width="30" :text-inside="true" />
  </div>
</template>

<template>
  <div flex flex-col gap-2 class="w-1/2">
    <o-progress :percentage="70" stroke-width="xs" />
    <o-progress :percentage="70" stroke-width="sm" />
    <o-progress :percentage="70" stroke-width="md" />
    <o-progress :percentage="70" stroke-width="lg" />
    <o-progress :percentage="70" :stroke-width="20" />
    <o-progress :percentage="70" :stroke-width="30" :text-inside="true" />
  </div>
</template>

Status

The progress bar has three states, each with a different default style.

<template>
  <div flex flex-col gap-2 class="w-1/2">
    <o-progress :percentage="100" status="success" />
    <o-progress :percentage="100" status="warning" />
    <o-progress :percentage="50" status="error" />
  </div>
</template>

<template>
  <div flex flex-col gap-2 class="w-1/2">
    <o-progress :percentage="100" status="success" />
    <o-progress :percentage="100" status="warning" />
    <o-progress :percentage="50" status="error" />
  </div>
</template>

Indeterminate

You can have a Progress bar with indeterminate value with the indeterminate property.

You cam control the animation duration by duration.

50%

Full

<script setup lang='ts'>
const format = percentage => (percentage === 100 ? 'Full' : `${percentage}%`)
</script>

<template>
  <div flex flex-col gap-2 class="w-1/2">
    <o-progress :percentage="50" :indeterminate="true" />
    <o-progress :percentage="100" :format="format" :indeterminate="true" />
    <o-progress :percentage="100" status="success" :indeterminate="true" :duration="5" />
    <o-progress :percentage="100" status="warning" :indeterminate="true" :duration="1" />
    <o-progress :percentage="50" status="error" :indeterminate="true" />
  </div>
</template>

<script setup lang='ts'>
const format = percentage => (percentage === 100 ? 'Full' : `${percentage}%`)
</script>

<template>
  <div flex flex-col gap-2 class="w-1/2">
    <o-progress :percentage="50" :indeterminate="true" />
    <o-progress :percentage="100" :format="format" :indeterminate="true" />
    <o-progress :percentage="100" status="success" :indeterminate="true" :duration="5" />
    <o-progress :percentage="100" status="warning" :indeterminate="true" :duration="1" />
    <o-progress :percentage="50" status="error" :indeterminate="true" />
  </div>
</template>

Color

You can change the color of the Progress with the property color, it accepts color string, function, or array.

50%

30%

60%

80%

20%

60%

40%

<template>
  <div flex flex-col gap-2 class="w-1/2">
    <o-progress :percentage="50" stroke-width="lg" color="primary" />
    <o-progress :percentage="30" stroke-width="lg" color="secondary" />
    <o-progress :percentage="60" stroke-width="lg" color="success" />
    <o-progress :percentage="80" stroke-width="lg" color="warning" />
    <o-progress :percentage="20" stroke-width="lg" color="error" />
    <o-progress :percentage="60" stroke-width="lg" color="info" />
    <o-progress :percentage="40" stroke-width="lg" color="linear-gradient(to right, #0c02ba, #00ff95)" />
  </div>
</template>

<template>
  <div flex flex-col gap-2 class="w-1/2">
    <o-progress :percentage="50" stroke-width="lg" color="primary" />
    <o-progress :percentage="30" stroke-width="lg" color="secondary" />
    <o-progress :percentage="60" stroke-width="lg" color="success" />
    <o-progress :percentage="80" stroke-width="lg" color="warning" />
    <o-progress :percentage="20" stroke-width="lg" color="error" />
    <o-progress :percentage="60" stroke-width="lg" color="info" />
    <o-progress :percentage="40" stroke-width="lg" color="linear-gradient(to right, #0c02ba, #00ff95)" />
  </div>
</template>

You have much more customization.

20%

<script setup lang='ts'>
const percentage = ref(20)
const customColor = ref('#409eff')
const customColors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 },
]
const customColorMethod = (percentage: number) => {
  if (percentage < 30)
    return '#909399'

  if (percentage < 70)
    return '#e6a23c'

  return '#67c23a'
}
const increase = () => {
  percentage.value += 10
  if (percentage.value > 100)
    percentage.value = 100
}
const decrease = () => {
  percentage.value -= 10
  if (percentage.value < 0)
    percentage.value = 0
}
</script>

<template>
  <div flex flex-col gap-2 class="w-1/2">
    <o-progress :percentage="percentage" :color="customColor" />
    <o-progress :percentage="percentage" :color="customColorMethod" />
    <o-progress :percentage="percentage" :color="customColors" />
    <o-progress :percentage="percentage" :color="customColors" />
    <div>
      <o-button class="mr-2" @click="increase">
        +
      </o-button>
      <o-button @click="decrease">
        -
      </o-button>
    </div>
  </div>
</template>

<script setup lang='ts'>
const percentage = ref(20)
const customColor = ref('#409eff')
const customColors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 },
]
const customColorMethod = (percentage: number) => {
  if (percentage < 30)
    return '#909399'

  if (percentage < 70)
    return '#e6a23c'

  return '#67c23a'
}
const increase = () => {
  percentage.value += 10
  if (percentage.value > 100)
    percentage.value = 100
}
const decrease = () => {
  percentage.value -= 10
  if (percentage.value < 0)
    percentage.value = 0
}
</script>

<template>
  <div flex flex-col gap-2 class="w-1/2">
    <o-progress :percentage="percentage" :color="customColor" />
    <o-progress :percentage="percentage" :color="customColorMethod" />
    <o-progress :percentage="percentage" :color="customColors" />
    <o-progress :percentage="percentage" :color="customColors" />
    <div>
      <o-button class="mr-2" @click="increase">
        +
      </o-button>
      <o-button @click="decrease">
        -
      </o-button>
    </div>
  </div>
</template>

BgColor

You can change the background of the Progress with the bg-color property.

50%

30%

60%

80%

20%

60%

<template>
  <div flex flex-col gap-2 class="w-1/2">
    <o-progress :percentage="50" stroke-width="lg" color="primary" bg-color="primary" />
    <o-progress :percentage="30" stroke-width="lg" color="secondary" bg-color="secondary" />
    <o-progress :percentage="60" stroke-width="lg" color="success" bg-color="success" />
    <o-progress :percentage="80" stroke-width="lg" color="warning" bg-color="warning" />
    <o-progress :percentage="20" stroke-width="lg" color="error" bg-color="error" />
    <o-progress :percentage="60" stroke-width="lg" color="info" bg-color="info" />
  </div>
</template>

<template>
  <div flex flex-col gap-2 class="w-1/2">
    <o-progress :percentage="50" stroke-width="lg" color="primary" bg-color="primary" />
    <o-progress :percentage="30" stroke-width="lg" color="secondary" bg-color="secondary" />
    <o-progress :percentage="60" stroke-width="lg" color="success" bg-color="success" />
    <o-progress :percentage="80" stroke-width="lg" color="warning" bg-color="warning" />
    <o-progress :percentage="20" stroke-width="lg" color="error" bg-color="error" />
    <o-progress :percentage="60" stroke-width="lg" color="info" bg-color="info" />
  </div>
</template>

Striped

You can add striped prop to Progress to apply a stripe over the progress bar's background color.

80%

40%

30%

<template>
  <div flex flex-col gap-2 class="w-1/2">
    <o-progress :percentage="80" stroke-width="lg" color="primary" bg-color="primary" striped />
    <o-progress :percentage="40" stroke-width="lg" color="secondary" bg-color="secondary" striped />
    <o-progress :percentage="30" stroke-width="lg" color="success" bg-color="success" striped />
  </div>
</template>

<template>
  <div flex flex-col gap-2 class="w-1/2">
    <o-progress :percentage="80" stroke-width="lg" color="primary" bg-color="primary" striped />
    <o-progress :percentage="40" stroke-width="lg" color="secondary" bg-color="secondary" striped />
    <o-progress :percentage="30" stroke-width="lg" color="success" bg-color="success" striped />
  </div>
</template>

Circular Progress

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

25%

<template>
  <div fscw gap-2>
    <o-progress type="circle" :percentage="0" />
    <o-progress type="circle" :percentage="25" />
    <o-progress type="circle" :percentage="100" status="success" />
    <o-progress type="circle" :percentage="70" status="warning" />
    <o-progress type="circle" :percentage="50" status="error" />
  </div>
</template>

<template>
  <div fscw gap-2>
    <o-progress type="circle" :percentage="0" />
    <o-progress type="circle" :percentage="25" />
    <o-progress type="circle" :percentage="100" status="success" />
    <o-progress type="circle" :percentage="70" status="warning" />
    <o-progress type="circle" :percentage="50" status="error" />
  </div>
</template>

Dashboard Progress

You also can specify type property to dashboard to use dashboard progress bar.

20%

40%

<script setup lang='ts'>
const percentage = ref(20)
const customColors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 },
]

onMounted(() => {
  setInterval(() => {
    percentage.value = (percentage.value % 100) + 10
  }, 500)
})
</script>

<template>
  <div fscw gap-2>
    <o-progress type="dashboard" :percentage="20" :color="customColors" />
    <o-progress type="dashboard" stroke-width="lg" :percentage="percentage" :color="customColors" />
  </div>
</template>

<script setup lang='ts'>
const percentage = ref(20)
const customColors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 },
]

onMounted(() => {
  setInterval(() => {
    percentage.value = (percentage.value % 100) + 10
  }, 500)
})
</script>

<template>
  <div fscw gap-2>
    <o-progress type="dashboard" :percentage="20" :color="customColors" />
    <o-progress type="dashboard" stroke-width="lg" :percentage="percentage" :color="customColors" />
  </div>
</template>

Customized content

Use default slot to add customized content.

Content

80%Progressing

<template>
  <div flex flex-col gap-2 class="w-1/2">
    <o-progress :percentage="50">
      <o-button text type="primary">
        Content
      </o-button>
    </o-progress>
    <o-progress :percentage="50" :text-inside="true" :stroke-width="20" status="error">
      <span>Content</span>
    </o-progress>
    <div flex gap-2 class="w-fit">
      <o-progress type="circle" :percentage="100" status="success">
        <o-button type="success" rounded-full>
          <template #icon>
            <div i-carbon-checkmark-filled />
          </template>
        </o-button>
      </o-progress>
      <o-progress :percentage="80" type="dashboard">
        <template #default="{ percentage: percentageValue }">
          <span class="block mt-10px text-28px">{{ percentageValue }}%</span>
          <span class="block mt-10px text-12px">Progressing</span>
        </template>
      </o-progress>
    </div>
  </div>
</template>

<template>
  <div flex flex-col gap-2 class="w-1/2">
    <o-progress :percentage="50">
      <o-button text type="primary">
        Content
      </o-button>
    </o-progress>
    <o-progress :percentage="50" :text-inside="true" :stroke-width="20" status="error">
      <span>Content</span>
    </o-progress>
    <div flex gap-2 class="w-fit">
      <o-progress type="circle" :percentage="100" status="success">
        <o-button type="success" rounded-full>
          <template #icon>
            <div i-carbon-checkmark-filled />
          </template>
        </o-button>
      </o-progress>
      <o-progress :percentage="80" type="dashboard">
        <template #default="{ percentage: percentageValue }">
          <span class="block mt-10px text-28px">{{ percentageValue }}%</span>
          <span class="block mt-10px text-12px">Progressing</span>
        </template>
      </o-progress>
    </div>
  </div>
</template>

Progress Props

Name	Type	Default	Description
percentage	`number`	`0`	Percentage, required.
type	`'line' \| 'circle' \| 'dashboard'`	`'line'`	The type of progress bar.
stroke-width	`'xs' \| 'sm' \| 'md' \| 'lg' \| number`	`'sm'`	The width of progress bar.
text-inside	`boolean`	`false`	Whether to place the percentage inside progress bar, only works when `type` is 'line'.
status	`'success' \| 'error' \| 'warning'`	`''`	The current status of progress bar.
indeterminate	`boolean`	`false`	Set indeterminate progress.
duration	`number`	`3`	Control the animation duration of indeterminate progress.
color	`string \| function \| array`	`''`	Progress bar color. Overrides `status` prop.
bg-color	`string \| function \| array`	`''`	Progress bar Background color.
striped	`boolean`	`false`	Stripe over the progress bar's color.
not-text-color	`boolean`	`false`	Do not synchronize the text color with the progress bar color.
width	`number`	`126`	The canvas width of circle progress bar.
show-text	`boolean`	`true`	Whether to show percentage.
stroke-linecap	`'butt' \| 'round' \| 'square'`	`'round'`	Circle/Dashboard type shape at the end path.
format	`(percentage: number) => string`	`(percentage: number): string => percentage + '%'`	Custom text format.

Progress Slots

Name	Parameters	Description
default	`()`	Customized content, parameter is `{ percentage }`

Progress NEW #

Basic usage #

StrokeWidth #

Status #

Indeterminate #

Color #

BgColor #

Striped #

Circular Progress #

Dashboard Progress #

Customized content #

Progress Props #

Progress Slots #