---
title: Spinner
source: https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/sdk-component/feedback/Spinner
---

Spinners are used to indicate to your users that content is loading on the screen.

### Usage

```jsx
import { Spinner } from 'nr1'
```

### Examples

#### Basic

```jsx
<Spinner />
```

#### Dot

```jsx
<Spinner type={Spinner.TYPE.DOT} />
```

#### Inline

```jsx
<Spinner inline />
```

### Props

| `className` string    | Appends class names to the component.Should be used only for positioning and spacing purposes.                                                                                                                                                                                                                                                                                |
| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `inline` boolean      | If `true`, the spinner will be displayed inline.                                                                                                                                                                                                                                                                                                                              |
| `spacingType` enum\[] | Spacing property. Spacing is defined as a tuple of zero to four values, which follow the same conventions as CSS properties like `margin` or `padding`. To omit a value, use `SPACING_TYPE.OMIT`. Spinner.SPACING_TYPE.EXTRA_LARGE, Spinner.SPACING_TYPE.LARGE, Spinner.SPACING_TYPE.MEDIUM, Spinner.SPACING_TYPE.NONE, Spinner.SPACING_TYPE.OMIT, Spinner.SPACING_TYPE.SMALL |
| `style` object        | Inline style for custom styling.Should be used only for positioning and spacing purposes.                                                                                                                                                                                                                                                                                     |
| `testId` string       | Adds a `data-test-id` attribute. Use it to target the component in unit and E2E tests.For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.For example, `my-nerdpack.some-element`. **Note:** You might not see `data-test-id` attributes as they are removed from the DOM, to debug them pass a `e2e-test` query parameter to the URL.           |
| `type` enum           | Type of loading animation. Spinner.TYPE.CIRCLE, Spinner.TYPE.DOT                                                                                                                                                                                                                                                                                                              |