ProgressBar

ProgressBar is a process status indicator.

Props

Prop	Type	Default	Description
value	number	0	Current value of the progress bar

Example component with value

50%

<ProgressBar :value="50" />

ProgressBar with Value and Label

The example below demonstrates how to display a progress bar with a percentage label next to it. This is useful for visually indicating progress along with a numeric value.

50%

50%

<div class="progress-right-container">
  <ProgressBar :value="50" />
  <span class="progress-label">50%</span>
</div>

ProgressBar with Value and Label Below

This example demonstrates how to display a progress bar with a percentage label below it.
This layout is useful when you want to show the progress value in a more prominent or separated way, such as in dashboards or reports.

50%

50%

<div class="progress-below-container">
  <ProgressBar :value="50" />
  <span class="progress-label">50%</span>
</div>