ionische loading animation

Ionen Spinner

ionSpinner bietet viele Arten von Dreh Laden animiertes Symbol. Wenn Sie die Schnittstelle zu laden, können Sie die entsprechende Ladesymbol für den Benutzer darstellen.

Dieses Symbol wird in SVG verwendet.

Verwendung

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

Wie die meisten anderen ionischen Komponenten, wie, Spinner kann Farbe Benennung ionischen Standard verwendet werden, wie folgt:

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

Beispiele

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) { 
  
});

Versuchen »

Der Effekt ist wie folgt: