案例:ionic案例     状态:可编辑再运行    进入竖版
 运行结果 
x
 
1
<html ng-app="ionicApp">
2
  <head>
3
    <meta charset="utf-8">
4
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
5
6
    <title>W3xue教程(w3xue.com)</title>
7
    <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
8
    <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
9
    <script type="text/javascript">
10
    angular.module('ionicApp', ['ionic'])
11
12
    .controller('MyCtrl', function($scope) {     
13
      
14
    });
15
    </script>
16
    <style type="text/css">
17
    body {
18
      cursor: url('finger.png'), auto;
19
    }    
20
    p {
21
      text-align: center;
22
      margin-bottom: 40px !important;
23
    }
24
    .spinner svg {
25
      width: 19% !important;
26
      height: 85px !important;
27
    }
28
    </style>
29
  </head>
30
  <body ng-controller="MyCtrl">
31
    <ion-content scroll="false" class="has-header">
32
      <p>
33
        <ion-spinner icon="android"></ion-spinner>
34
        <ion-spinner icon="ios"></ion-spinner>
35
        <ion-spinner icon="ios-small"></ion-spinner>
36
        <ion-spinner icon="bubbles" class="spinner-balanced"></ion-spinner>
37
        <ion-spinner icon="circles" class="spinner-energized"></ion-spinner>
38
      </p>
39
40
      <p>
41
        <ion-spinner icon="crescent" class="spinner-royal"></ion-spinner>
42
43
        <ion-spinner icon="dots" class="spinner-dark"></ion-spinner>
44
        <ion-spinner icon="lines" class="spinner-calm"></ion-spinner>
45
        <ion-spinner icon="ripple" class="spinner-assertive"></ion-spinner>
46
        <ion-spinner icon="spiral"></ion-spinner>
47
      </p>
48