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 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