Spinner
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
|
|
Component
selector: ion-spinner
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 svg {
width: 28px;
height: 28px;
stroke: #444;
fill: #222;
}
Instance Members
ngOnInit()
load()
Input Properties
Attr | Type | Details |
---|---|---|
name | string |
SVG spinner name. |
duration | string |
How long it takes it to do one loop. |
paused | string |
If the animation is paused or not. Defaults to |