ionic loading animation

ion-spinner

ionSpinner provides many types of rotary loading animated icon. When you load the interface, you can present to the user the appropriate loading icon.

This icon is used in SVG.

usage

<ion-spinner icon="spiral"></ion-spinner>    //默认用法

Like most other ionic components, like, spinner may be used ionic standard color naming, as follows:

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

Examples

HTML code

<ion-content scroll="false" class="has-header">
  <p>
    <ion-spinner icon="android"></ion-spinner>
    <ion-spinner icon="ios"></ion-spinner>
    <ion-spinner icon="ios-small"></ion-spinner>
    <ion-spinner icon="bubbles" class="spinner-balanced"></ion-spinner>
    <ion-spinner icon="circles" class="spinner-energized"></ion-spinner>
  </p>

  <p>
    <ion-spinner icon="crescent" class="spinner-royal"></ion-spinner>

    <ion-spinner icon="dots" class="spinner-dark"></ion-spinner>
    <ion-spinner icon="lines" class="spinner-calm"></ion-spinner>
    <ion-spinner icon="ripple" class="spinner-assertive"></ion-spinner>
    <ion-spinner icon="spiral"></ion-spinner>
  </p>


</ion-content>

CSS code

body {
  cursor: url('../../www.runob.com/try/demo_source/finger.png'), auto;
}    
p {
  text-align: center;
  margin-bottom: 40px !important;
}
.spinner svg {
  width: 19% !important;
  height: 85px !important;
}

JavaScript code

angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope) { 
  
});

try it"

The effect is as follows: