@contentful/f36-spinner

---

title: 'Spinner' type: 'component' status: 'stable' slug: /components/spinner/ github: 'https://github.com/contentful/forma-36/tree/master/packages/forma-36-react-components/src/components/Spinner' storybook: 'https://f36-storybook.contentful.com/?path=/story/components-spinner--default' typescript: ./src/Spinner.tsx

Spinner

A Spinner is a graphic element that helps communicating to users that an action is in progress and it will take some time to be completed.

Table of contents

• Code examples
• Props

<Spinner />

Code examples

With text

It’s possible to use the Spinner with other elements. A very common pattern is using it together with text.

<div>
  Loading <Spinner />
</div>

Another good example of the Spinner being used with other components is the loading state of Forma 36’s button.

Props

import { Props } from '@contentful/f36-docs-utils';