Latest web development tutorials

ionic loading animation


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.


<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>


HTML code

<ion-content scroll="false" class="has-header">
    <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>

    <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>


CSS code

body {
  cursor: url('../../'), 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) { 

The effect is as follows: