grommet
docs
components

Spinner

a spinner

Storybook
CodeSandbox
Github

Using Grommet for HPE?See Spinner examples and guidance.

Props

color

The border color of the Spinner.

string

A hex, name, or rgb value.

"brand"
object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

message

Custom message for Spinner. Used for accessibility by screen readers.

string

When message is a string, the message will be announced for screen readers once the Spinner is loaded.

"spinner loaded"
object

When an object, the 'start' message will be announced as the Spinner appears, and the 'end' message as the spinner closes.


{
  start: "string",
  end: "string"
}

size

A fixed size.

string
"xsmall"
"small"
"medium"
"large"
"xlarge"
"string"

Theme

spinner.container

Any valid Box prop for the Spinner container.

object

'color' is used for the spinner border color and 'size' for the default size of the Spinner.


{
  animation: "rotateRight", 
  color: "brand",
  pad: "small", 
  round: "full", 
  size: "small"
}

spinner.icon

The default Spinner visualization.

node

A react element or SVG to use as the default Spinner.

<Icon />
<svg>...</svg>
SVG

spinner.size.xsmall

The xsmall size of the Spinner.

string
"18px"

spinner.size.small

The small size of the Spinner.

string
"24px"

spinner.size.medium

The medium size of the Spinner.

string
"48px"

spinner.size.large

The large size of the Spinner.

string
"72px"

spinner.size.xlarge

The xlarge size of the Spinner.

string
"96px"