Progress

Each bar is a role="progressbar" named by label, with its value range on the role; valueText gives a human reading. Stacked bars each read on their own. indeterminate shows a bar of unknown progress (still under reduced motion).

Single bar

40%

Stacked, striped and animated

Indeterminate

Source

<script setup lang="ts">import { BsProgress, BsProgressBar } from '@mintplayer/vue-bootstrap/progress-bar';</script><template>  <BsProgress>    <BsProgressBar :value="15" label="Downloaded" />    <BsProgressBar :value="30" color="warning" striped label="Queued" />  </BsProgress>  <BsProgress indeterminate label="Loading results" /></template>