Reference generated from the custom elements manifest — 8 properties, 0 slots, 1 events.
PLAYGROUND3 CONTROLS
PREVIEW / al-progress / SOUTHLEFT
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 PARITYNOT TRACKED
NO DESIGN-SYSTEM PROJECT TRACKS THIS COMPONENT AGAINST A FIGMA FILE — IT IS EITHER OUTSIDE EVERY PROJECT’S DECLARED SCOPE, OR NOT YET SEEDED INTO ITS PROJECT’S PARITY MANIFEST.
ACCESSIBILITYAXE 4.12.1
CHECKEVIDENCEDETAILRESULT
Default stateAXEprogress--CirclePASS
Advanced statesAXE33 further storiesPASS
Screen readerMANUALNo screen-reader pass has been recorded for this component.NOT RECORDED
Keyboard navigationINTERACTION TESTSNo interaction tests and no manual keyboard pass.NOT RECORDED
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
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. Continue the animation until progress reaches its end value (the fill and label are derived from currentProgress at render time)