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>

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

This is some data about something

This is a detail about that text of something.

Spinner

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

export type SpinnerProps = SVGProps<SVGSVGElement> & {
  size?: number | string
}

define function Spinner(props: SpinnerProps): ReactNode

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