Loading States

Loading states are used to indicate that content is being loaded.

Skeletor API

To show a skeleton loading state, simply add the aria-busy attribute to the element you want to show the loading state for.

<div aria-busy="true">
  <p>This is now hidden</p>
</div>

Loading example...

Cerberus provides a Spinner component that can be used to indicate a loading state.

Note

Spinners are built into Buttons via the Button.Icon component. This example is only beneficial use outside of buttons.

Loading example...

The Spinner component is a simple SVG element that can be styled with CSS.

Loading example...

The Spinner component accepts the same props as an SVG element.

Name	Default	Description
`size`		A strict `height` and `width` of the Spinner.

On this page

To show a skeleton loading state, simply add the aria-busy attribute to the element you want to show the loading state for.

<div aria-busy="true">
  <p>This is now hidden</p>
</div>

This is a description of something.

Trash content is a place where you can find all the content that you have deleted. You can restore or permanently delete the content from here.

Skeleton

Loading example...

Cerberus provides a Spinner component that can be used to indicate a loading state.

Note

Spinners are built into Buttons via the Button.Icon component. This example is only beneficial use outside of buttons.

Loading example...

The Spinner component is a simple SVG element that can be styled with CSS.

Loading example...

The Spinner component accepts the same props as an SVG element.

Name	Default	Description
`size`		A strict `height` and `width` of the Spinner.