Progress
Used to display the progress status of the current operation. It combines the strengths of various UIs and pioneers dual-state progress, multi-ring nesting, and high-performance circular animation effects.
Basic Usage
Linear progress bar, supporting multiple built-in semantic colors and automatic status icons.
Percentage Inside
Percentage does not occupy extra space, suitable for file uploads and other scenarios. You can change the height of the progress bar with stroke-width and use the text-inside attribute to place percentages inside the bar.
Custom Content
Add custom content via the default slot. For circular progress, scoped slots are also supported to retrieve real-time progress.
Circle and Dashboard
Enable via type="circle" or dashboard. Supports rotation animation and custom SVG gradients.
Multi-ring Nesting (Premium)
By passing an array to percentage, you can achieve a multi-ring nesting effect similar to the Apple Watch.
Striped and Flow
Enable striped to add a design sense, and striped-flow to make the progress bar "move".
Advanced Features
1. Secondary Percentage
Supports the secondary-percentage attribute. Perfect for video playback buffering.
2. Stepped Progress (Steps)
The steps property allows the progress bar to be split by physical scales.
3. Indeterminate State
When exact values cannot be predicted (e.g., scanning, connecting).
Use in Nuxt
The component is perfectly adapted for Nuxt 3, supporting auto-import and unique SSR gradient IDs.
API
Props
| Prop | Description | Type | Default |
|---|---|---|---|
| type | Progress type | 'line' | 'circle' | 'dashboard' | 'line' |
| percentage | percentage | number | number[] | 0 |
| secondary-percentage | Secondary percentage (for buffering effect) | number | 0 |
| status | Built-in status, automatically matches color and icon | 'success' | 'exception' | 'warning' | 'info' | — |
| stroke-width | Progress bar width | number | 6 |
| text-inside | Whether to show text inside (line type only) | boolean | false |
| width | Circular canvas width | number | 126 |
| show-text | Whether to show progress text/icon | boolean | true |
| color | Progress color, supports function/array gradient/object gradient | string | function | string[] | Record<string, string> | — |
| define-background-color | Background track color | string | — |
| icon | Custom status icon | string | — |
| animated | Enables circular rotation animation | boolean | false |
| steps | Number of segments | number | 0 |
| stroke-linecap | Progress bar end shape | 'butt' | 'round' | 'square' | 'round' |
| format | Custom text formatting function | function(percentage) | — |
| striped | Enables striped style | boolean | false |
| striped-flow | Enables striped flow animation | boolean | false |
| indeterminate | Enables indeterminate slide mode | boolean | false |
| duration | Animation cycle duration (s) | number | 3 |
Slots
| Slot Name | Description | Parameters |
|---|---|---|
| default | Custom content for the center or right side of the progress bar | { percentage: number } |
Theme Variables
| Variable | Description | Default |
|---|---|---|
--yh-progress-bar-bg | Track background | var(--yh-fill-color-darker) |
--yh-progress-duration | Default animation cycle | 3s |