-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathspinner.js
More file actions
193 lines (193 loc) · 4.67 KB
/
Copy pathspinner.js
File metadata and controls
193 lines (193 loc) · 4.67 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
/**
* @ngdoc directive
* @name ionSpinner
* @module ionic
* @restrict E
*
* @description
* The `ionSpinner` directive provides a variety of animated spinners.
* Spinners enables you to give your users feedback that the app is
* processing/thinking/waiting/chillin' out, or whatever you'd like it to indicate.
* By default, the {@link ionic.directive:ionRefresher} feature uses this spinner, rather
* than rotating font icons (previously included in [ionicons](http://ionicons.com/)).
* While font icons are great for simple or stationary graphics, they're not suited to
* provide great animations, which is why Ionic uses SVG instead.
*
* Ionic offers ten spinners out of the box, and by default, it will use the appropriate spinner
* for the platform on which it's running. Under the hood, the `ionSpinner` directive dynamically
* builds the required SVG element, which allows Ionic to provide all ten of the animated SVGs
* within 3KB.
*
* <style>
* .spinner-table {
* max-width: 280px;
* }
* .spinner-table tbody > tr > th, .spinner-table tbody > tr > td {
* vertical-align: middle;
* width: 42px;
* height: 42px;
* }
* .spinner {
* stroke: #444;
* fill: #444; }
* .spinner svg {
* width: 28px;
* height: 28px; }
* .spinner.spinner-inverse {
* stroke: #fff;
* fill: #fff; }
*
* .spinner-android {
* stroke: #4b8bf4; }
*
* .spinner-ios, .spinner-ios-small {
* stroke: #69717d; }
*
* .spinner-spiral .stop1 {
* stop-color: #fff;
* stop-opacity: 0; }
* .spinner-spiral.spinner-inverse .stop1 {
* stop-color: #000; }
* .spinner-spiral.spinner-inverse .stop2 {
* stop-color: #fff; }
* </style>
*
* <script src="http://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
* <table class="table spinner-table" ng-app="ionic">
* <tr>
* <th>
* <code>android</code>
* </th>
* <td>
* <ion-spinner icon="android"></ion-spinner>
* </td>
* </tr>
* <tr>
* <th>
* <code>ios</code>
* </th>
* <td>
* <ion-spinner icon="ios"></ion-spinner>
* </td>
* </tr>
* <tr>
* <th>
* <code>ios-small</code>
* </th>
* <td>
* <ion-spinner icon="ios-small"></ion-spinner>
* </td>
* </tr>
* <tr>
* <th>
* <code>bubbles</code>
* </th>
* <td>
* <ion-spinner icon="bubbles"></ion-spinner>
* </td>
* </tr>
* <tr>
* <th>
* <code>circles</code>
* </th>
* <td>
* <ion-spinner icon="circles"></ion-spinner>
* </td>
* </tr>
* <tr>
* <th>
* <code>crescent</code>
* </th>
* <td>
* <ion-spinner icon="crescent"></ion-spinner>
* </td>
* </tr>
* <tr>
* <th>
* <code>dots</code>
* </th>
* <td>
* <ion-spinner icon="dots"></ion-spinner>
* </td>
* </tr>
* <tr>
* <th>
* <code>lines</code>
* </th>
* <td>
* <ion-spinner icon="lines"></ion-spinner>
* </td>
* </tr>
* <tr>
* <th>
* <code>ripple</code>
* </th>
* <td>
* <ion-spinner icon="ripple"></ion-spinner>
* </td>
* </tr>
* <tr>
* <th>
* <code>spiral</code>
* </th>
* <td>
* <ion-spinner icon="spiral"></ion-spinner>
* </td>
* </tr>
* </table>
*
* Each spinner uses SVG with SMIL animations, however, the Android spinner also uses JavaScript
* so it also works on Android 4.0-4.3. Additionally, each spinner can be styled with CSS,
* and scaled to any size.
*
*
* @usage
* The following code would use the default spinner for the platform it's running from. If it's neither
* iOS or Android, it'll default to use `ios`.
*
* ```html
* <ion-spinner></ion-spinner>
* ```
*
* By setting the `icon` attribute, you can specify which spinner to use, no matter what
* the platform is.
*
* ```html
* <ion-spinner icon="spiral"></ion-spinner>
* ```
*
* ## Spinner Colors
* Like with most of Ionic's other components, spinners can also be styled using
* Ionic's standard color naming convention. For example:
*
* ```html
* <ion-spinner class="spinner-energized"></ion-spinner>
* ```
*
*
* ## Styling SVG with CSS
* One cool thing about SVG is its ability to be styled with CSS! Some of the properties
* have different names, for example, SVG uses the term `stroke` instead of `border`, and
* `fill` instead of `background-color`.
*
* ```css
* .spinner svg {
* width: 28px;
* height: 28px;
* stroke: #444;
* fill: #444;
* }
* ```
*
*/
IonicModule
.directive('ionSpinner', function() {
return {
restrict: 'E',
controller: '$ionicSpinner',
link: function($scope, $element, $attrs, ctrl) {
var spinnerName = ctrl.init();
$element.addClass('spinner spinner-' + spinnerName);
}
};
});