Das beste ionische loading animation-Tutorial im Jahr 2024. In diesem Tutorial können Sie Ionen Spinner,Beispiele, lernen
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.
<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>
<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>
body {
cursor: url('de/de/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;
}
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope) {
});
Der Effekt ist wie folgt: