Reference generated from the custom elements manifest — 8 properties, 0 slots, 1 events.
PLAYGROUND3 CONTROLS
PREVIEW / al-progress / ALTITUDE
Loading preview
circleSize
FLAGS
CODE — HTML / REACT
Guidance
NOT YET AUTHORED · 20 COMPONENTS COVERED
NO USAGE GUIDANCE HAS BEEN WRITTEN FOR THIS COMPONENT YET. THE API BELOW IS GENERATED FROM THE MANIFEST AND IS COMPLETE; WHAT IS MISSING IS WHEN TO REACH FOR IT AND WHEN NOT TO.
FIGMA PARITYALTITUDE DESIGN SYSTEM
BOTH CHANGEDAltitude Design SystemFIGMA SET · Progress2 PROPERTY DIFFSFROM TRACKED PROJECTION
Code and Figma each changed since the last confirmed sync. Neither side should be overwritten blindly.
DECIDED BY
CONTRACT DIFF
FIGMA SIDE
OBSERVED
LAST CONFIRMED SYNC
2026-08-28
PUBLIC SURFACE
8 ATTR · 0 SLOT · 1 EVENT · 0 PART
The component’s public surface — attributes and their value sets, slots, events, CSS parts and custom properties, from the manifest — compared against the Figma set’s property definitions.
The CI gate disables color-contrast globally (libs/al-web-components/story-fixture/src/main.ts), so its result never reaches a test run. It is enabled for this measurement, and reported here whichever way it comes out.
NO CONTRAST VIOLATIONS ACROSS THIS COMPONENT’S 34 STORIES.
import '@southleft/al-web-components/components/progress';
import { ALProgress } from '@southleft/al-react';
API — 8 PROPS8 DOCUMENTED
PROPTYPEDEFAULT
isCirclebooleanIs circle?
- **true** Displays a circular progress indicator
- **false** Displays a linear progress indicatorfalse
circleSize'sm' | 'md' | 'lg' | 'xl'Circle size property
- Sets the width of the circular progress indicator
- **sm** 16px, and what an omitted `circleSize` renders — named so the axis
is expressible in code rather than living as the absence of a value
- **md** 24px
- **lg** 32px
- **xl** 40px—
showLabelbooleanShow label?
**true** Displays the progress label
**false** Does not display a progress labelfalse
labelType'ratio'Label type
**default** Sets the progress label as a percentage
**ratio** Sets the progress label as a ratio—
durationnumberDuration of the progress in seconds
- Default is 00
currentProgressnumberThe current completed value of the progress
- Default is 00
endProgressnumberThe value at which the progress will end
- Default is 100100
labelAriastringAria label for A11y
- Default is "progress"'progress'
SLOTS0
THIS COMPONENT DECLARES NO SLOTS IN THE MANIFEST.
EVENTS1
EVENTDESCRIPTIONTYPE
onProgressChangeFired when the progress label updates. Detail: `{ label }` — the rendered label text, not the numeric value.CustomEvent
PUBLIC METHODS2
METHODDESCRIPTION
updateCircle()Updates the circular progress indicator's stroke-dashoffset to reflect the current progress 1. Find the change in pixels based on the current change in progress 2. Scale the change value, and subtract it from circumference to find the new value
animateFillDuration()Animates the progress indicator fill when a duration is provided 1. Calculate the elapsed time 2. Calculate the new progress value based on the elapsed time 3. Set the current progress after checking that: - **default** it is not more than the progress end value of 100 - **reversed** it is not less that the progress end value of 0 4. Round down to the nearest integer to set the current progress percentage 5. If the indicator is circular, update the circle 6. Continue the animation until progress reaches its end value