Progress

Display the current progress of an operation or task, such as file uploading.

Basic Usage

Set the percent property on the Progress component, which represents the percentage of the progress bar. Required, must be between 0-100.

0%

Progress 70

<template>
  <div style="width: 350px">
    <div class="mb-16">
      <b-progress :percent="0"></b-progress>
    </div>
    <div class="mb-16">
      <b-progress :percent="70" status="text" active><span>Progress 70</span></b-progress>
    </div>
    <div class="mb-16">
      <b-progress :percent="100" status="success"></b-progress>
    </div>
    <div class="mb-16">
      <b-progress :percent="50" status="exception"></b-progress>
    </div>
  </div>
</template>

Text Inside

Set text-inside to configure the text-inside display mode

0%

70%

80%

100%

50%

<template>
  <div style="width: 350px">
    <div class="mb-16">
      <b-progress text-inside :stroke-width="20" :percent="0"></b-progress>
    </div>
    <div class="mb-16">
      <b-progress text-inside :stroke-width="20" :percent="70"></b-progress>
    </div>
    <div class="mb-16">
      <b-progress
        text-inside
        :stroke-width="20"
        :percent="80"
        color="rgba(142, 113, 199, 0.7)"
      ></b-progress>
    </div>
    <div class="mb-16">
      <b-progress text-inside :stroke-width="20" :percent="100" status="success"></b-progress>
    </div>
    <div class="mb-16">
      <b-progress text-inside :stroke-width="20" :percent="50" status="exception"></b-progress>
    </div>
  </div>
</template>

Set Styles

Set color, radius, etc. to configure property styles; enable active to activate animation styles

40%

60%

30%

Progress 60

<template>
  <div style="width: 350px">
    <div class="mb-16">
      <b-progress :percent="70" :show-text="false"></b-progress>
    </div>
    <div class="mb-16">
      <b-progress :percent="40" color="#76eeff"></b-progress>
    </div>
    <div class="mb-16">
      <b-progress text-inside :stroke-width="20" :percent="60" color="#df52ff"></b-progress>
    </div>
    <div class="mb-16">
      <b-progress :stroke-width="20" :percent="30" color="#ffcf2f"></b-progress>
    </div>
    <div class="mb-16">
      <b-progress :percent="60" status="text" active><span>Progress 60</span></b-progress>
    </div>
  </div>
</template>

Dynamic Progress

Can be controlled by external operations

10%

<template>
  <div style="width: 350px">
    <b-progress :stroke-width="20" :percent="percent" active color="#ff86d8"></b-progress>

    <div class="mt-16">
      <b-button-group>
        <b-button icon="minus" size="mini" @click="minus"></b-button>
        <b-button icon="plus" size="mini" @click="add"></b-button>
      </b-button-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const percent = ref(10)

function add() {
  percent.value += 10
  if (percent.value >= 100) percent.value = 100
}

function minus() {
  percent.value -= 10
  if (percent.value < 0) percent.value = 0
}
</script>

Props

Parameter	Description	Type	Options	Default
percent	percentage	Number	—	0
status	Progress bar status	String	text/success/exception	—
stroke-width	Progress bar line width, in px	Number	—	8
text-inside	Show text inside the progress bar	Boolean	—	false
show-text	Whether to show progress text	Boolean	—	true
bg-color	Progress bar background color	String	—	#f3f3f3
color	Progress bar color	String	—	#2d8cf0
radius	Progress bar border radius	String	—	100px
active	Progress bar background animation	Boolean	—	false