Quaff

QProgress

Progress indicators show task completion or ongoing work. Choose a linear bar or circular indicator, with measured progress or an indeterminate animation.

Uploading files

60%
info QLinearProgress API Source
interface QLinearProgressProps extends HTMLAttributes<HTMLDivElement>
animationSpeed
?: number = 600
Duration of the transition animation in milliseconds.
buffer
?: number = undefined
Secondary progress value, shown as a lighter track behind the main progress.
color
?: string = "primary"
Color of the progress indicator.
expressive
?: boolean = undefined
Uses the Material 3 Expressive wavy indicator. When omitted, inherits the `Quaff.init()` setting (false by default). Set true or false to override it.
indeterminate
?: boolean = false
Enables an infinite loading animation instead of showing progress.
instantFeedback
?: boolean = false
Disables the transition animation when the value changes.
noRound
?: boolean = false
Removes the rounded sides of the progress bar.
reverse
?: boolean = false
Reverses the normal fill direction. RTL fills from the right, except Hebrew (lang="he"), which fills from the left.
size
?: CssValue | number = undefined
Size of the component using CSS size values (e.g. "40px", "1rem"). If a number is provided, it will be converted to a px value.
trackColor
?: string = "secondary-container"
Color of the background track.
value
?: number = $bindable(0)
The bound value of the component.
info QCircularProgress API Source
interface QCircularProgressProps extends HTMLAttributes<HTMLDivElement>
angle
?: number = 0
Rotation angle of the progress arc in degrees (top is 0 and bottom 180).
animationSpeed
?: number = 600
Duration of the transition animation in milliseconds.
color
?: string = "primary"
Color of the progress arc.
expressive
?: boolean = undefined
Uses the Material 3 Expressive wavy indicator. When omitted, inherits the `Quaff.init()` setting (false by default). Set true or false to override it.
fontSize
?: CssValue | number = "0.25em"
Font size of the center text when showValue is true.
indeterminate
?: boolean = false
Enables an infinite spinning animation instead of showing progress.
instantFeedback
?: boolean = false
Disables the transition animation when the value changes.
max
?: number = 100
Maximum value for the progress range.
min
?: number = 0
Minimum value for the progress range.
noRound
?: boolean = false
Removes the rounded ends of the progress arc.
showValue
?: boolean = false
Shows the current progress value in the center of the circle.
size
?: CssValue | number = undefined
Size of the component using CSS size values (e.g. "40px", "1rem"). If a number is provided, it will be converted to a px value.
thickness
?: number = undefined
Thickness of the progress arc.
trackColor
?: string = undefined
Color of the background circle.
value
?: number = $bindable(0)
The bound value of the component.

Usage

Measured Progress
Pass value when the amount of completed work is known. Linear progress accepts fractions from 0–1 or percentages above 1; circular progress uses 0–100 by default. Turn on expressive for wavy indicators.
Expressive

Downloading files · 40%

40%
Indeterminate Progress
Use indeterminate when the total or completion percentage is unknown. Both indicators animate without a value.
Expressive

Checking for updates…

Buffer and Direction
buffer shows work prepared ahead of the completed portion, such as downloaded audio ahead of playback. Compare reading directions or use reverse to flip the fill.
Reverse

40% played · 75% buffered

Colors and Sizes
Set color and trackColor with theme names or CSS colors. size sets the bar height or circle diameter; numbers use pixels and CSS lengths retain their units. noRound makes the ends square.
Square ends

12px bar

48px
80px
112px
Custom Ranges and Labels
Circular progress supports a custom min and max. Enable showValue to display the value; supply children to customize its label. Adjust animationSpeed for value transitions; instantFeedback skips them.
Instant feedback
3 / 8

3 of 8 steps complete

Accessibility

Give each indicator an accessible name with aria-label or aria-labelledby. Use nearby text to explain the task and aria-valuetext when its number needs context.

Measured indicators expose their value and range; indeterminate ones omit aria-valuenow. Indicators do not take keyboard focus. Keep status text visible so color and animation are not the only cues.

Privacy Policy