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
Intermediate Progress
Custom Height
Props
number
default:"0"
The current progress value as a percentage (between 0 and 100).
Example Use Cases
Showing Upload Progress
Use thevalue prop to display the progress of a file upload:
Custom Styling
Adjust the height of the progress bar using custom classes:Notes
- The
valueprop must be a number between0and100. 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
classattribute allows for additional styling, such as adjusting the height or color of the progress bar.