الأيونية الرسوم المتحركة تحميل

ايون الدوار

يوفر ionSpinner أنواع عديدة من دوار رمز تحميل الرسوم المتحركة. عند تحميل واجهة، يمكنك تقديم للمستخدم رمز التحميل المناسب.

ويستخدم هذا الرمز في SVG.

استعمال

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

مثل معظم المكونات الأيونية أخرى، مثل، يمكن استخدام الدوار الأيونية معيار تسمية اللون، على النحو التالي:

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

أمثلة

كود HTML

<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

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

شفرة جافا سكريبت

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

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

محاولة »

والنتيجة هي كما يلي: