Ionic Loading Animation-ion-spinner

Loading animations are required for the project, because the Ionic framework is used, and the Ionspinner in the framework provides many animated icons for rotating loads. When your interface loads, you can present the appropriate load icon to the user. Choose a suitable one based on your project needs, and here are some of the effects of loading animations:

650) this.width=650; "class=" AlignCenter size-full wp-image-720 "src=" http://www.aliyue.net/wp-content/uploads/2016 /03/ion.gif "alt=" Ion "width=" 306 "height=" 348 "style=" Height:auto;vertical-align:middle;border:0px;text-align: center;margin:0px Auto;/> The icon is SVG.

Usage

<ion-spinner icon= "Spiral" ></ion-spinner>//Default usage

Like most other ionic components, spinner can also use Ionic's standard color naming conventions, like this:

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

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 (' http://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) {});

==================================

Xiao Yue Blog

Demo:http://www.aliyue.net

Note: Open please search ionic find the demo you want to download

==================================

This article is from the "Xiao Yue Blog" blog, please be sure to keep this source http://aliyue.blog.51cto.com/11564403/1773838

Ionic Loading Animation-ion-spinner