Get startedPatternsComponentsStylesContentSupport
Select your development framework to see all code in your development languages. You can change this in the top right of the screen.
AllAccordionBadgeBlockButtonButton groupCalloutCheckboxContainerDate pickerDetailsDividerDropdownFile uploaderFilter chipFooterForm itemForm stepperGridHeaderHero bannerIconsIcon buttonInputListMicrosite headerModalNotification bannerPaginationPopoverProgress indicatorRadioSide menuSkeleton loadingSpacerTableTabsTextText areaTooltip

Progress indicator

Provide visual feedback to users while loading.

Related components: File uploader, Skeleton loading
Code examples
const [visible, setVisible] = useState(true);
<GoACircularProgress variant="inline" size="large" message="Loading message..." visible={visible}></GoACircularProgress>
variantinline | fullscreen
Stretch across the full screen or use it inline
sizelarge | small
Size of the progress indicator
progressnumber
Set the progress value. Setting this value will change the type from infinite to progress
messagestring
Loading message displayed under the progress indicator
visibleboolean
Show/hide the page loader. This allows for fade transition to be applied in each transition.
Design guidelines
Join design system drop in hours to get feedback on your service, propose new components or patterns, suggest changes to existing resources, ask questions, and give feedback to the design system. These sessions are for Government of Alberta product teams.
Book time in drop in hours
Get startedPatternsComponentsStylesContentSubmit an issue#design-system-supportContribute to the design systemGive feedbackRelease notes