# ion-spinner

URL: https://ionicframework.com/docs/v8/api/spinner

**Encapsulation**: [shadow](/docs/reference/glossary.md#shadow)

The Spinner component provides a variety of animated SVG spinners. Spinners are visual indicators that the app is loading content or performing another process that the user needs to wait on.

## Basic Usage

The default spinner is based on the mode. When the mode is `ios` the spinner will be `"lines"`, and when the mode is `md` the spinner will be `"circular"`. If the `name` property is set, then that spinner will be used instead of the mode specific spinner.

**JavaScript**

```html
<ion-item>
  <ion-label>Default</ion-label>
  <ion-spinner></ion-spinner>
</ion-item>

<ion-item>
  <ion-label>Dots</ion-label>
  <ion-spinner name="dots"></ion-spinner>
</ion-item>

<ion-item>
  <ion-label>Lines</ion-label>
  <ion-spinner name="lines"></ion-spinner>
</ion-item>

<ion-item>
  <ion-label>Lines Small</ion-label>
  <ion-spinner name="lines-small"></ion-spinner>
</ion-item>

<ion-item>
  <ion-label>Lines Sharp</ion-label>
  <ion-spinner name="lines-sharp"></ion-spinner>
</ion-item>

<ion-item>
  <ion-label>Lines Sharp Small</ion-label>
  <ion-spinner name="lines-sharp-small"></ion-spinner>
</ion-item>

<ion-item>
  <ion-label>Bubbles</ion-label>
  <ion-spinner name="bubbles"></ion-spinner>
</ion-item>

<ion-item>
  <ion-label>Circles</ion-label>
  <ion-spinner name="circles"></ion-spinner>
</ion-item>

<ion-item>
  <ion-label>Circular</ion-label>
  <ion-spinner name="circular"></ion-spinner>
</ion-item>

<ion-item>
  <ion-label>Crescent</ion-label>
  <ion-spinner name="crescent"></ion-spinner>
</ion-item>
```

**Angular**

`src/app/example.component.html`

```html
<ion-item>
  <ion-label>Default</ion-label>
  <ion-spinner></ion-spinner>
</ion-item>

<ion-item>
  <ion-label>Dots</ion-label>
  <ion-spinner name="dots"></ion-spinner>
</ion-item>

<ion-item>
  <ion-label>Lines</ion-label>
  <ion-spinner name="lines"></ion-spinner>
</ion-item>

<ion-item>
  <ion-label>Lines Small</ion-label>
  <ion-spinner name="lines-small"></ion-spinner>
</ion-item>

<ion-item>
  <ion-label>Lines Sharp</ion-label>
  <ion-spinner name="lines-sharp"></ion-spinner>
</ion-item>

<ion-item>
  <ion-label>Lines Sharp Small</ion-label>
  <ion-spinner name="lines-sharp-small"></ion-spinner>
</ion-item>

<ion-item>
  <ion-label>Bubbles</ion-label>
  <ion-spinner name="bubbles"></ion-spinner>
</ion-item>

<ion-item>
  <ion-label>Circles</ion-label>
  <ion-spinner name="circles"></ion-spinner>
</ion-item>

<ion-item>
  <ion-label>Circular</ion-label>
  <ion-spinner name="circular"></ion-spinner>
</ion-item>

<ion-item>
  <ion-label>Crescent</ion-label>
  <ion-spinner name="crescent"></ion-spinner>
</ion-item>
```

`src/app/example.component.ts`

```ts
import { Component } from '@angular/core';
import { IonItem, IonLabel, IonSpinner } from '@ionic/angular/standalone';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  imports: [IonItem, IonLabel, IonSpinner],
})
export class ExampleComponent {}
```

**React**

```tsx
import React from 'react';
import { IonItem, IonLabel, IonSpinner } from '@ionic/react';

function Example() {
  return (
    <>
      <IonItem>
        <IonLabel>Default</IonLabel>
        <IonSpinner></IonSpinner>
      </IonItem>

      <IonItem>
        <IonLabel>Dots</IonLabel>
        <IonSpinner name="dots"></IonSpinner>
      </IonItem>

      <IonItem>
        <IonLabel>Lines</IonLabel>
        <IonSpinner name="lines"></IonSpinner>
      </IonItem>

      <IonItem>
        <IonLabel>Lines Small</IonLabel>
        <IonSpinner name="lines-small"></IonSpinner>
      </IonItem>

      <IonItem>
        <IonLabel>Lines Sharp</IonLabel>
        <IonSpinner name="lines-sharp"></IonSpinner>
      </IonItem>

      <IonItem>
        <IonLabel>Lines Sharp Small</IonLabel>
        <IonSpinner name="lines-sharp-small"></IonSpinner>
      </IonItem>

      <IonItem>
        <IonLabel>Bubbles</IonLabel>
        <IonSpinner name="bubbles"></IonSpinner>
      </IonItem>

      <IonItem>
        <IonLabel>Circles</IonLabel>
        <IonSpinner name="circles"></IonSpinner>
      </IonItem>

      <IonItem>
        <IonLabel>Circular</IonLabel>
        <IonSpinner name="circular"></IonSpinner>
      </IonItem>

      <IonItem>
        <IonLabel>Crescent</IonLabel>
        <IonSpinner name="crescent"></IonSpinner>
      </IonItem>
    </>
  );
}
export default Example;
```

**Vue**

```html
<template>
  <ion-item>
    <ion-label>Default</ion-label>
    <ion-spinner></ion-spinner>
  </ion-item>

  <ion-item>
    <ion-label>Dots</ion-label>
    <ion-spinner name="dots"></ion-spinner>
  </ion-item>

  <ion-item>
    <ion-label>Lines</ion-label>
    <ion-spinner name="lines"></ion-spinner>
  </ion-item>

  <ion-item>
    <ion-label>Lines Small</ion-label>
    <ion-spinner name="lines-small"></ion-spinner>
  </ion-item>

  <ion-item>
    <ion-label>Lines Sharp</ion-label>
    <ion-spinner name="lines-sharp"></ion-spinner>
  </ion-item>

  <ion-item>
    <ion-label>Lines Sharp Small</ion-label>
    <ion-spinner name="lines-sharp-small"></ion-spinner>
  </ion-item>

  <ion-item>
    <ion-label>Bubbles</ion-label>
    <ion-spinner name="bubbles"></ion-spinner>
  </ion-item>

  <ion-item>
    <ion-label>Circles</ion-label>
    <ion-spinner name="circles"></ion-spinner>
  </ion-item>

  <ion-item>
    <ion-label>Circular</ion-label>
    <ion-spinner name="circular"></ion-spinner>
  </ion-item>

  <ion-item>
    <ion-label>Crescent</ion-label>
    <ion-spinner name="crescent"></ion-spinner>
  </ion-item>
</template>

<script setup lang="ts">
  import { IonItem, IonLabel, IonSpinner } from '@ionic/vue';
</script>
```

## Theming

### Colors

**JavaScript**

```html
<ion-spinner></ion-spinner>
<ion-spinner color="primary"></ion-spinner>
<ion-spinner color="secondary"></ion-spinner>
<ion-spinner color="tertiary"></ion-spinner>
<ion-spinner color="success"></ion-spinner>
<ion-spinner color="warning"></ion-spinner>
<ion-spinner color="danger"></ion-spinner>
<ion-spinner color="light"></ion-spinner>
<ion-spinner color="medium"></ion-spinner>
<ion-spinner color="dark"></ion-spinner>
```

**Angular**

`src/app/example.component.html`

```html
<ion-spinner></ion-spinner>
<ion-spinner color="primary"></ion-spinner>
<ion-spinner color="secondary"></ion-spinner>
<ion-spinner color="tertiary"></ion-spinner>
<ion-spinner color="success"></ion-spinner>
<ion-spinner color="warning"></ion-spinner>
<ion-spinner color="danger"></ion-spinner>
<ion-spinner color="light"></ion-spinner>
<ion-spinner color="medium"></ion-spinner>
<ion-spinner color="dark"></ion-spinner>
```

`src/app/example.component.ts`

```ts
import { Component } from '@angular/core';
import { IonSpinner } from '@ionic/angular/standalone';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  imports: [IonSpinner],
})
export class ExampleComponent {}
```

**React**

```tsx
import React from 'react';
import { IonSpinner } from '@ionic/react';

function Example() {
  return (
    <>
      <IonSpinner></IonSpinner>
      <IonSpinner color="primary"></IonSpinner>
      <IonSpinner color="secondary"></IonSpinner>
      <IonSpinner color="tertiary"></IonSpinner>
      <IonSpinner color="success"></IonSpinner>
      <IonSpinner color="warning"></IonSpinner>
      <IonSpinner color="danger"></IonSpinner>
      <IonSpinner color="light"></IonSpinner>
      <IonSpinner color="medium"></IonSpinner>
      <IonSpinner color="dark"></IonSpinner>
    </>
  );
}
export default Example;
```

**Vue**

```html
<template>
  <ion-spinner></ion-spinner>
  <ion-spinner color="primary"></ion-spinner>
  <ion-spinner color="secondary"></ion-spinner>
  <ion-spinner color="tertiary"></ion-spinner>
  <ion-spinner color="success"></ion-spinner>
  <ion-spinner color="warning"></ion-spinner>
  <ion-spinner color="danger"></ion-spinner>
  <ion-spinner color="light"></ion-spinner>
  <ion-spinner color="medium"></ion-spinner>
  <ion-spinner color="dark"></ion-spinner>
</template>

<script setup lang="ts">
  import { IonSpinner } from '@ionic/vue';
</script>
```

### Styling

You may use custom CSS to style the spinner. For example, you can resize the spinner by setting the width and height.

**JavaScript**

```html
<ion-spinner></ion-spinner>

<style>
  ion-spinner {
    width: 100px;
    height: 100px;
  }
</style>
```

**Angular**

`src/app/example.component.html`

```html
<ion-spinner></ion-spinner>
```

`src/app/example.component.css`

```css
ion-spinner {
  width: 100px;
  height: 100px;
}
```

`src/app/example.component.ts`

```ts
import { Component } from '@angular/core';
import { IonSpinner } from '@ionic/angular/standalone';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  imports: [IonSpinner],
})
export class ExampleComponent {}
```

**React**

`src/main.tsx`

```tsx
import React from 'react';
import { IonSpinner } from '@ionic/react';

import './main.css';

function Example() {
  return (
    <>
      <IonSpinner></IonSpinner>
    </>
  );
}
export default Example;
```

`src/main.css`

```css
ion-spinner {
  width: 100px;
  height: 100px;
}
```

**Vue**

```html
<template>
  <ion-spinner></ion-spinner>
</template>

<script setup lang="ts">
  import { IonSpinner } from '@ionic/vue';
</script>

<style scoped>
  ion-spinner {
    width: 100px;
    height: 100px;
  }
</style>
```

### CSS Custom Properties

**JavaScript**

```html
<ion-spinner></ion-spinner>

<style>
  ion-spinner {
    --color: #54dc98;
  }
</style>
```

**Angular**

`src/app/example.component.html`

```html
<ion-spinner></ion-spinner>
```

`src/app/example.component.css`

```css
ion-spinner {
  --color: #54dc98;
}
```

`src/app/example.component.ts`

```ts
import { Component } from '@angular/core';
import { IonSpinner } from '@ionic/angular/standalone';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  imports: [IonSpinner],
})
export class ExampleComponent {}
```

**React**

`src/main.tsx`

```tsx
import React from 'react';
import { IonSpinner } from '@ionic/react';

import './main.css';

function Example() {
  return (
    <>
      <IonSpinner></IonSpinner>
    </>
  );
}
export default Example;
```

`src/main.css`

```css
ion-spinner {
  --color: #54dc98;
}
```

**Vue**

```html
<template>
  <ion-spinner></ion-spinner>
</template>

<script setup lang="ts">
  import { IonSpinner } from '@ionic/vue';
</script>

<style scoped>
  ion-spinner {
    --color: #54dc98;
  }
</style>
```

## Properties

### color

**Description**: The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics.md).

**Attribute**: `color`

**Type**: `"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined`

**Default**: `undefined`

### duration

**Description**: Duration of the spinner animation in milliseconds. The default varies based on the spinner.

**Attribute**: `duration`

**Type**: `number | undefined`

**Default**: `undefined`

### name

**Description**: The name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used.

**Attribute**: `name`

**Type**: `"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "lines-small" | undefined`

**Default**: `undefined`

### paused

**Description**: If `true`, the spinner's animation will be paused.

**Attribute**: `paused`

**Type**: `boolean`

**Default**: `false`

## Events

No events available for this component.

## Methods

No public methods available for this component.

## CSS Shadow Parts

No CSS shadow parts available for this component.

## CSS Custom Properties

| Name | Description |
| --- | --- |
| `--color` | Color of the spinner |

## Slots

No slots available for this component.