Progress

The BProgress component is used to show a progress bar when waiting for a long-running process to complete.

Indefinite progress

The default progress bar is indefinite, which means it will show a continuous animation as long as its shown.

<script setup lang="ts">

</script>

<template>
  <BProgress />
</template>

Fake progress

The fake progress bar tries to simulate a linear progress bar by increasing the progress value by a random amount every now and then but never truly completes.

<script setup lang="ts">
import { ref } from 'vue'

const loading = ref(false)
const error = ref(false)

function simulateError() {
  error.value = true
  setTimeout(() => {
    error.value = false
  }, 100)
}
</script>

<template>
  <BProgress
    type="fake"
    :error="error"
    :loading="loading"
  />

  <div class="flex gap-2 justify-end mt-4">
    <BBtn @click="loading = !loading">
      {{ loading ? 'Stop' : 'Start' }}
    </BBtn>
    <BBtn
      :disabled="!loading"
      color="error"
      @click="simulateError"
    >
      Simulate error
    </BBtn>
  </div>
</template>

Linear progress

The linear progress bar shows the progress of a task by changing the width of the progress bar from 0% to 100% according to the amount of work completed.

0

<script setup lang="ts">
import { ref, watch } from 'vue'

const loading = ref(false)
const error = ref(false)
const progress = ref(0)
function work() {
  setTimeout(() => {
    progress.value = Math.min(1, progress.value + Math.random() * 0.1)
    if (progress.value < 1)
      work()
  }, Math.random() * 200 + 100)
}
function simulateError() {
  error.value = true
  setTimeout(() => {
    progress.value = 1
    error.value = false
  }, 100)
}

watch(loading, state => {
  if (state)
    work()
  else
    progress.value = 0
})
</script>

<template>
  {{ progress }}

  <BProgress
    type="linear"
    :error="error"
    :amount="progress"
  />

  <div class="flex gap-2 justify-end mt-4">
    <BBtn @click="loading = !loading">
      {{ loading ? 'Stop' : 'Start' }}
    </BBtn>
    <BBtn
      :disabled="!loading"
      color="error"
      @click="simulateError"
    >
      Simulate error
    </BBtn>
  </div>
</template>