Progress

Default

Bind percent from 0 to 100 for a standard progress bar.

Code copied

<template>
  <div class="center">
    <s-progress :percent="62" />
    <s-progress :percent="45" color="success" />
    <s-progress :percent="80" color="warning" />

    <s-progress :percent="55" color="dark" />
  </div>
</template>

<style scoped lang="scss">
.center {
  width: 100%;
  max-width: 520px;
  display: flex;

Colors

Apply theme colors to match your UI context. Hover a bar to see its default slot text in a tooltip.

Code copied

<template>
  <div class="center">
    <s-progress :percent="70" color="primary">primary</s-progress>
    <s-progress :percent="70" color="success">success</s-progress>
    <s-progress :percent="70" color="danger">danger</s-progress>
    <s-progress :percent="70" color="warning">warning</s-progress>
  </div>
</template>

<style scoped lang="scss">
.center {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>

Indeterminate

Use indeterminate for unknown-duration operations.

Code copied

<template>
  <div class="center">
    <s-progress indeterminate color="primary" />
  </div>
</template>

<style scoped lang="scss">
.center {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>

Height

Adjust bar thickness with the height prop.

Code copied

<template>
  <div class="center">
    <s-progress :percent="55" :height="6" />
    <s-progress :percent="55" :height="12" color="success" />
  </div>
</template>

<style scoped lang="scss">
.center {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>

API