Get startedFoundationsPatternsComponentsStylesContentSupportReport a bug
AllAccordionBadgeBlockButtonButton groupCalloutCheckboxChipContainerDate pickerDetailsDividerDropdownFile uploaderFooterForm itemForm stepperGridHeaderHero bannerIconsIcon buttonInputListMicrosite headerModalNotification bannerPaginationPopoverProgress indicatorRadioSide menuSkeleton loadingSpacerTableTabsText areaTooltip

Skeleton loading

Provide visual feedback to users while loading a content heavy page or page element.

Related components: Progress indicator
<GoASkeleton type="text"></GoASkeleton>
typeimage | text | title | text-small | avatar | header | paragraph | thumbnail | card | profile
re-set skeleton shapes to represent your content
size1 | 2 | 3 | 4
Size can affect either the height, width or both for different skeleton types. Defaults to 1.
mt,mr,mb,mlnone | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl
Apply margin to the top, right, bottom, and/or left of the component.
lineCountnumber
Used within components that contain multiple lines. Currently only used in card skeleton type Defaults to 3.
maxWidthstring
Set component maximum width. Currently only used in card skeleton type Defaults to 320px.
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 startedPatternsComponentsStylesSubmit an issue#design-system-supportDrop-in hoursContribute to the design systemGive feedbackRelease notes