Animated Progress Bar in Vue.js

This challenge asks you to build a visually appealing progress bar component in Vue.js that dynamically updates its width based on a provided percentage. Creating reusable UI components with animations is a fundamental skill in Vue development, and this exercise will reinforce your understanding of Vue's reactivity, template rendering, and CSS transitions.

Problem Description

You need to create a Vue component called ProgressBar that displays a progress bar. The component should accept a percentage prop, which represents the progress as a number between 0 and 100 (inclusive). The progress bar's width should visually reflect this percentage. The bar should smoothly transition between different percentage values using CSS transitions. The background of the progress bar should be a light gray, and the filled portion (representing the progress) should be a vibrant blue. The component should also display the percentage value numerically within the progress bar.

Key Requirements:

• percentage Prop: The component must accept a percentage prop (number).
• Dynamic Width: The width of the filled portion of the progress bar must be dynamically updated based on the percentage prop.
• CSS Transition: A smooth CSS transition should be applied to the width change, making the animation visually appealing.
• Visual Styling: The background of the progress bar should be light gray (#f0f0f0), and the filled portion should be blue (#3498db).
• Percentage Display: The numerical percentage value should be displayed within the progress bar.
• Error Handling: If the percentage prop is outside the range of 0-100, the component should display a default progress of 0 and log an error to the console.

Expected Behavior:

• When the percentage prop changes, the progress bar's width and the displayed percentage value should update smoothly with a CSS transition.
• The progress bar should always be visually representative of the provided percentage.
• Invalid percentage values (outside 0-100) should be handled gracefully, defaulting to 0 and logging an error.

Examples

Example 1:

Input: percentage = 50
Output: A progress bar filled to 50% with a light gray background, a blue filled portion, and the text "50%" displayed within the bar.
Explanation: The component calculates the width of the filled portion as 50% of the total width and applies a CSS transition for a smooth visual update.

Example 2:

Input: percentage = 100
Output: A progress bar completely filled (100%) with a light gray background, a blue filled portion, and the text "100%" displayed within the bar.
Explanation: The component calculates the width of the filled portion as 100% of the total width.

Example 3:

Input: percentage = -10
Output: A progress bar filled to 0% with a light gray background, a blue filled portion, and the text "0%" displayed within the bar. An error message is logged to the console.
Explanation: The component handles the invalid input by defaulting to 0% and logging an error.

Constraints

• The component should be written in Vue.js using the Single-File Component (SFC) format.
• The animation should be implemented using CSS transitions, not JavaScript-based animation libraries.
• The component should be responsive and adapt to different screen sizes (though a full responsive design is not required, basic adaptability is expected).
• The component should be reusable and easily integrated into other Vue applications.
• The CSS should be contained within the component's <style> tag.

Notes

• Consider using Vue's reactivity system to automatically update the progress bar when the percentage prop changes.
• Think about how to structure your template to efficiently render the progress bar and the percentage text.
• Use CSS transitions to create a smooth animation effect. transition: width 0.3s ease; is a good starting point.
• Remember to handle edge cases, such as invalid percentage values.
• Focus on clean, readable, and maintainable code.