Returnless UI

Progress bar ​

The progress component is used to visually represent the completion of a task or operation. It shows how much of the task has been completed and how much is still left.

Props
color?:
any
Defaults to "slate"
The color of the progress-bar.
value:
number
Defaults to unknown
The value of the progress bar.
indicatorPosition?:
"above" | "below" | null
Defaults to null
The position of the indicator relative to the progress bar.

Usage ​

js
<script lang="ts" setup>
import { ProgressBar } from 'focus-ui';
</script>

<template>
  <ProgressBar :value="33" />
</template>

With progress indicator above ​

Using the indicator-position prop, you can position the progress indicator above or below the progress bar.

33% completed
js
<script lang="ts" setup>
import { ProgressBar, ProgressBarIndicator } from 'focus-ui';
</script>

<template>
  <ProgressBar :value="33" indicator-position="above">
    <ProgressBarIndicator align="right">33% completed</ProgressBarIndicator>
  </ProgressBar>
</template>

With progress indicator below ​

33% completed
js
<script lang="ts" setup>
import { ProgressBar, ProgressBarIndicator } from 'focus-ui';
</script>

<template>
  <ProgressBar :value="33" indicator-position="below">
    <ProgressBarIndicator align="right">33% completed</ProgressBarIndicator>
  </ProgressBar>
</template>

Progress indicator alignment ​

Using the align prop, you can align the progress indicator to the left, center, or right.

33% completed
js
<script lang="ts" setup>
import { ProgressBar, ProgressBarIndicator } from 'focus-ui';
</script>

<template>
  <ProgressBar :value="33" indicator-position="below">
    <ProgressBarIndicator align="left">33% completed</ProgressBarIndicator>
  </ProgressBar>
</template>

Best practices ​

Progress components should:

  • Give users an indication of how much of the task has completed and how much is left.
  • Not be used for entire page loads. In this case, use the Skeleton page component.