Progress

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

Linear progress bar

Use percentage attribute to set the percentage. It's required and must be between 0-100. You can custom text format by setting format.

50%

Full

---

<template>
  <b-space vertical item-class="w-280px">
    <b-progress :percentage="50" />
    <b-progress :percentage="100" :format="format" />
    <b-progress :percentage="100" status="success" />
    <b-progress :percentage="100" status="warning" />
    <b-progress :percentage="50" status="exception" />
  </b-space>
</template>

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

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%

---

<template>
  <b-space vertical item-class="w-280px">
    <b-progress :text-inside="true" :stroke-width="28" :percentage="70" />
    <b-progress
      :text-inside="true"
      :stroke-width="24"
      :percentage="100"
      status="success"
    />
    <b-progress
      :text-inside="true"
      :stroke-width="20"
      :percentage="80"
      status="warning"
    />
    <b-progress
      :text-inside="true"
      :stroke-width="16"
      :percentage="50"
      status="exception"
    />
  </b-space>
</template>

Custom color

You can use color attr to set the progress bar color. it accepts color string, function, or array.

20%

20%

20%

20%

---

<template>
  <b-space vertical item-class="w-280px">
    <b-progress :percentage="percentage" :color="customColor" />
    <b-progress :percentage="percentage" :color="customColorMethod" />
    <b-progress :percentage="percentage" :color="customColors" />
    <b-progress :percentage="percentage" :color="customColors" />
    <div>
      <b-button-group compact>
        <b-button @click="decrease">
          <template #icon>
            <b-icon :size="16"> <ControlMinus /></b-icon>
          </template>
        </b-button>
        <b-button @click="increase">
          <template #icon>
            <b-icon :size="16"> <ControlPlus /></b-icon> </template
        ></b-button>
      </b-button-group>
    </div>
  </b-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ControlMinus, ControlPlus } from '@bigin/icons-vue'

const percentage = ref(20)
const customColor = ref('var(--b-color-teal-3)')

const customColors = [
  { color: 'var(--b-color-orange-3)', percentage: 20 },
  { color: 'var(--b-color-yellow-3)', percentage: 40 },
  { color: 'var(--b-color-green-3)', percentage: 60 },
  { color: 'var(--b-color-teal-3)', percentage: 80 },
  { color: 'var(--b-color-blue-3)', percentage: 100 },
]

const customColorMethod = (percentage: number) => {
  if (percentage < 30) {
    return 'var(--b-color-orange-3)'
  }
  if (percentage < 70) {
    return 'var(--b-color-yellow-3)'
  }
  return 'var(--b-color-teal-3)'
}
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>

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%

---

<template>
  <b-space>
    <b-progress type="circle" :percentage="0" />
    <b-progress type="circle" :percentage="25" />
    <b-progress type="circle" :percentage="100" status="success" />
    <b-progress type="circle" :percentage="70" status="warning" />
    <b-progress type="circle" :percentage="50" status="exception" />
  </b-space>
</template>

Dashboard progress bar

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

10%

10%

---

<template>
  <b-space vertical alignment="start">
    <b-space>
      <b-progress type="dashboard" :percentage="percentage" :color="colors" />
      <b-progress type="dashboard" :percentage="percentage2" :color="colors" />
    </b-space>
    <div>
      <b-button-group compact>
        <b-button @click="decrease">
          <template #icon>
            <b-icon :size="16"><ControlMinus /></b-icon>
          </template>
        </b-button>
        <b-button @click="increase">
          <template #icon>
            <b-icon :size="16"><ControlPlus /></b-icon>
          </template>
        </b-button>
      </b-button-group>
    </div>
  </b-space>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { ControlMinus, ControlPlus } from '@bigin/icons-vue'

const percentage = ref(10)
const percentage2 = ref(0)

const colors = [
  { color: 'var(--b-color-orange-3)', percentage: 25 },
  { color: 'var(--b-color-yellow-3)', percentage: 50 },
  { color: 'var(--b-color-green-3)', percentage: 75 },
  { color: 'var(--b-color-teal-3)', percentage: 100 },
]

const increase = () => {
  percentage.value += 10
  if (percentage.value > 100) {
    percentage.value = 100
  }
}
const decrease = () => {
  percentage.value -= 10
  if (percentage.value < 0) {
    percentage.value = 0
  }
}
onMounted(() => {
  setInterval(() => {
    percentage2.value = (percentage2.value % 100) + 10
  }, 500)
})
</script>

Customized content

Use default slot to add customized content.

Content

80%

Processing

---

<template>
  <b-space vertical item-class="w-280px">
    <b-progress :percentage="50">
      <b-button ghost small>Content</b-button>
    </b-progress>
    <b-progress
      :text-inside="true"
      :stroke-width="20"
      :percentage="50"
      status="exception"
    >
      <span>Content</span>
    </b-progress>
    <b-space>
      <b-progress type="circle" :percentage="100" status="success">
        <b-avatar :icon="Check" circle class="b-bg-green-3" />
      </b-progress>
      <b-progress type="dashboard" :percentage="80">
        <template #default="{ percentage }">
          <h3 class="b-c-neutral-9">{{ percentage }}%</h3>
          <p class="b-c-neutral-7 text-sm mt-1">Processing</p>
        </template>
      </b-progress>
    </b-space>
  </b-space>
</template>

<script lang="ts" setup>
import { Check } from '@bigin/icons-vue'
</script>

Indeterminate progress

Use indeterminate attribute to set indeterminate progress, with duration to control the animation duration.

50%

Full

---

<template>
  <b-space vertical item-class="w-280px">
    <b-progress :percentage="50" indeterminate />
    <b-progress :percentage="100" :format="format" indeterminate />
    <b-progress
      :percentage="100"
      status="success"
      indeterminate
      :duration="5"
    />
    <b-progress
      :percentage="100"
      status="warning"
      indeterminate
      :duration="1"
    />
    <b-progress :percentage="50" status="exception" indeterminate />
  </b-space>
</template>

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

Attributes

Attribute	Description	Type	Accepted Values	Default
percentage	percentage, required	number	0-100	0
type	the type of progress bar	string	line / circle / dashboard	line
stroke-width	the width of progress bar	number	—	6
text-inside	whether to place the percentage inside progress bar, only works when type is 'line'	boolean	—	false
status	the current status of progress bar	string	success / exception / warning	—
indeterminate	set indeterminate progress	boolean	-	false
duration	control the animation duration of indeterminate progress	number	-	3
color	background color of progress bar. Overrides status prop	string/function/array	—	''
width	the canvas width of circle progress bar	number	—	126
show-text	whether to show percentage	boolean	—	true
stroke-linecap	circle/dashboard type shape at the end path	string	butt / round / square	round
format	custom text format	function(percentage)	—	—

Slots

Name	Description
default	Customized content, parameter is { percentage }