Spinner

A spinner is an animated spinning icon that lets users know content is being loaded.

Installation

Package installation information
Installyarn add @atlaskit/spinner
SourceBitbucket.org, (opens new window)
npm@atlaskit/spinner, (opens new window)
Bundleunpkg.com, (opens new window)

Props

appearance

Description

You can use this to invert the current theme. This is useful when you are displaying a spinner on a background that is not the same background color scheme as the main content.

Type"inherit" | "invert"

delay

Description

Delay the intro animation of Spinner. This is not to be used to avoid quick flickering of Spinner. Spinner will automatically fade in and takes ~200ms to become partially visible. This prop can be helpful for long delays such as 500-1000ms for when you want to not show a Spinner until some longer period of time has elapsed.

Typenumber

interactionName

Description

An optional interactionName used to identify when this component is holding an interaction.

Typestring

label

Description

Describes what the spinner is doing for assistive technologies. For example, "loading", "submitting", or "processing".

Typestring

ref

Description
No description.
Type((instance: SVGSVGElement) => void) | RefObject<SVGSVGElement>

size

Description

Size of the spinner. The available sizes are xsmall, small, medium, large, and xlarge. For most use cases, we recommend medium.

Typenumber | PresetSize

testId

Description

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests.

Typestring
Was this page helpful?
We use this feedback to improve our documentation.
© 2026 AtlassianTrademark, (opens new window)Privacy, (opens new window)License