Linear Progress Component

A customizable linear progress indicator for determinate or indeterminate states with sizing, variant, and positioning controls.

Overview

The Linear Progress component provides:

• Linear progress visualization with smooth animations
• Determinate and indeterminate modes
• Adjustable height and rounded styling
• Variant-based color schemes
• Optional absolute positioning for app bars or layouts

When to Use

Use the Linear Progress component when you need to:

• Show loading states or progress indicators
• Display task completion progress
• Indicate ongoing processes
• Provide visual feedback for long-running operations
• Show progress in a horizontal layout

Key Features

• Determinate Mode: Show precise progress using v-model and max.
• Indeterminate Mode: Looping animation for unknown durations.
• Height Control: Fine-tune track height to match dense or spacious layouts.
• Variants: Built-in themes (e.g. default, success) that align with other components.
• Rounded Corners: Enable pill-shaped tracks with the rounded prop.
• Absolute Positioning: Stick progress bars to layout edges via absolute.
• Responsive: Smooth width transitions that adapt to container size.

API Reference →

View Code →