animación de carga iónica

ion-spinner

ionSpinner ofrece muchos tipos de icono animado de carga rotativo. Cuando se carga la interfaz, se puede presentar al usuario la carga icono apropiado.

Este icono se utiliza en SVG.

uso

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

Como la mayoría de otros componentes iónicos, como, spinner se puede utilizar iónica de color de nomenclatura estándar, como sigue:

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

Ejemplos

código 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>

código 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;
}

código JavaScript

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

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

Trate »

El efecto es el siguiente: