Progress

Show a horizontal bar to indicate task progression.

Usage

Pass an integer as the value from 0 to 100 to the Progress bar component.

70%

<template>
  <s-progress :value="70" />
</template>

Max

You may also set the max number to set the maximum progress value, which will be relative to 100% percent.

40%

<template>
  <s-progress :value="2" :max="5" />
</template>

Steps

You can set an array of named steps in the max prop to show the active step, at the same time it sets the maximum value.

The first step is always shown at 0%, making the last 100%.

33%

Waiting to start

Cloning...

Migrating...

Deployed!

<template>
  <s-progress
      :value="1"
      :max="['Waiting to start', 'Cloning...', 'Migrating...', 'Deployed!']"
  />
</template>

Progress indicator

You can add a numeric indicator, which will show the percent on top the progress track.

20%

20%

<template>
  <s-progress :value="20" indicator />
</template>

Indeterminate

By not setting a value, or setting it as null, the progress bar becomes indeterminate. The bar will be animated as a carousel, but you can change it using the animation prop for an inverse carousel, a swinging bar or an elastic bar.

<template>
  <s-progress animation="swing" />
</template>