The Ionic Framework has built-in support for a spinner. This can be achieved by using <ion-spinner> directive.

Ionic offers 10 spinners, which gives native look and feel for the Android and iOS platforms. For animation, Ionic uses SVG instead of using the font icon. SVG file size is less than 3kb.


<ion-spinner></ion-spinner>

By default, the <ion-spinner> directive will give native look and feel to the spinner for Android and iOS.

The remaining spinner are.


<ion-spinner icon="spiral"></ion-spinner>


    <ion-spinner icon="ripple"></ion-spinner>


    <ion-spinner icon="lines"></ion-spinner>


    <ion-spinner icon="dots"></ion-spinner>


    <ion-spinner icon="cresent"></ion-spinner>


    <ion-spinner icon="circles"></ion-spinner>



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


    <ion-spinner icon="spiral" class="spinner-energized"></ion-spinner>

The output for the above code will look like.

spinner-ionic

 

Spinner Colors

We can use the standard Ionic CSS classes to change the color of the spinner

spinner-calm

spinner-royal

spinner-energized

spinner-positive

spinner-assertive

spinner-balanced  

 

For example


<ion-spinner icon="spiral" class="spinner-energized"></ion-spinner>

 

Custom Spinner Styling

We can change the style of spinners using custom CSS. To change background color and border, use fill and stroke as property respectively.

For example


.spinner svg {

width: 28px;

height: 28px;

stroke: #444;

fill: red;

}