Skip to main content
The Progress.vue component is a reusable Vue.js component for displaying progress bars. It is designed to show the completion percentage of a task in a visually intuitive way.

​
Features

Dynamic Progress

Displays progress based on the value prop.

Customizable Appearance

Supports customization with classes and styles for a personalized look.

Accessible

Includes ARIA attributes to enhance accessibility.

​
Usage

​
Basic Example

import { Progress } from '@robojuice/velure-ui';

<Progress value="90" />

​
Intermediate Progress

<Progress value="50" />

​
Custom Height

<Progress class="h-10" value="10" />

​
Props

​
value
number
default:"0"
The current progress value as a percentage (between 0 and 100).

​
Example Use Cases

​
Showing Upload Progress

Use the value prop to display the progress of a file upload: 
<Progress :value="uploadProgress" />

​
Custom Styling

Adjust the height of the progress bar using custom classes: 
<Progress class="h-10" :value="25" />

​
Notes

  • The value prop must be a number between 0 and 100. Ensure the value is validated before passing it to the component.
  • Use ARIA attributes provided by the component to enhance accessibility, especially for screen readers.
  • The class attribute allows for additional styling, such as adjusting the height or color of the progress bar.
For further customization, refer to the component’s source code.