Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

Spinner

ion-spinner

Improve this doc

The ion-spinner component provides a variety of animated SVG spinners. Spinners enables you to give users feedback that the app is actively processing/thinking/waiting/chillin’ out, or whatever you’d like it to indicate. By default, the ion-refresher feature uses this spinner component while it's the refresher is in the refreshing state.

Ionic offers a handful of spinners out of the box, and by default, it will use the appropriate spinner for the platform on which it’s running.

ios
ios-small
bubbles
circles
crescent
dots

Usage

The following code would use the default spinner for the platform it's running from. If it's neither iOS or Android, it'll default to use ios.

<ion-spinner></ion-spinner>

By setting the name property, you can specify which predefined spinner to use, no matter what the platform is.

<ion-spinner name="bubbles"></ion-spinner>

Styling SVG with CSS

One cool thing about SVG is its ability to be styled with CSS! One thing to note is that some of the CSS properties on an SVG element have different names. For example, SVG uses the term stroke instead of border, and fill instead of background-color.

ion-spinner * {
  width: 28px;
  height: 28px;
  stroke: #444;
  fill: #222;
}

Input Properties

Attr Type Details
color string

The color to use from your Sass $colors map. Default options are: "primary", "secondary", "danger", "light", and "dark". For more information, see Theming your App.

duration string

How long it takes it to do one loop.

mode string

The mode determines which platform styles to use. Possible values are: "ios", "md", or "wp". For more information, see Platform Styles.

name string

SVG spinner name.

paused boolean

If true, pause the animation.

Sass Variables

Property Default Description
$spinner-ios-ios-color #69717d

Color of the ios spinner

$spinner-ios-bubbles-color #000

Color of the bubbles spinner

$spinner-ios-circles-color #69717d

Color of the circles spinner

$spinner-ios-crescent-color #000

Color of the crescent spinner

$spinner-ios-dots-color #444

Color of the dots spinner

Property Default Description
$spinner-md-ios-color #69717d

Color of the ios spinner

$spinner-md-bubbles-color #000

Color of the bubbles spinner

$spinner-md-circles-color #69717d

Color of the circles spinner

$spinner-md-crescent-color #000

Color of the crescent spinner

$spinner-md-dots-color #444

Color of the dots spinner

Property Default Description
$spinner-wp-ios-color #69717d

Color of the ios spinner

$spinner-wp-bubbles-color #000

Color of the bubbles spinner

$spinner-wp-circles-color #69717d

Color of the circles spinner

$spinner-wp-crescent-color #000

Color of the crescent spinner

$spinner-wp-dots-color #444

Color of the dots spinner

API

Native

General