OLD | NEW |
1 /** | 1 /** |
2 @license | 2 @license |
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
7 Code distributed by Google as part of the polymer project is also | 7 Code distributed by Google as part of the polymer project is also |
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
9 | 9 |
10 */ | 10 */ |
11 /**************************/ | 11 /**************************/ |
12 /* STYLES FOR THE SPINNER */ | 12 /* STYLES FOR THE SPINNER */ |
13 /**************************/ | 13 /**************************/ |
14 | 14 |
15 /* | 15 /* |
16 * Constants: | 16 * Constants: |
17 * STROKEWIDTH = 3px | 17 * STROKEWIDTH = 3px |
18 * ARCSIZE = 270 degrees (amount of circle the arc takes up) | 18 * ARCSIZE = 270 degrees (amount of circle the arc takes up) |
19 * ARCTIME = 1333ms (time it takes to expand and contract arc) | 19 * ARCTIME = 1333ms (time it takes to expand and contract arc) |
20 * ARCSTARTROT = 216 degrees (how much the start location of the arc | 20 * ARCSTARTROT = 216 degrees (how much the start location of the arc |
21 * should rotate each time, 216 gives us a | 21 * should rotate each time, 216 gives us a |
22 * 5 pointed star shape (it's 360/5 * 3). | 22 * 5 pointed star shape (it's 360/5 * 3). |
23 * For a 7 pointed star, we might do | 23 * For a 7 pointed star, we might do |
24 * 360/7 * 3 = 154.286) | 24 * 360/7 * 3 = 154.286) |
25 * CONTAINERWIDTH = 28px | 25 * CONTAINERWIDTH = 28px |
26 * SHRINK_TIME = 400ms | 26 * SHRINK_TIME = 400ms |
27 */ | 27 */ |
28 | 28 |
29 :host { | 29 :host { |
30 display: inline-block; | 30 display: inline-block; |
31 position: relative; | 31 position: relative; |
32 width: 28px; /* CONTAINERWIDTH */ | 32 width: 28px; /* CONTAINERWIDTH */ |
33 height: 28px; /* CONTAINERWIDTH */ | 33 height: 28px; /* CONTAINERWIDTH */ |
34 } | 34 } |
35 | 35 |
36 #spinnerContainer { | 36 #spinnerContainer { |
37 width: 100%; | 37 width: 100%; |
38 height: 100%; | 38 height: 100%; |
| 39 |
| 40 /* The spinner does not have any contents that would have to be |
| 41 * flipped if the direction changes. Always use ltr so that the |
| 42 * style works out correctly in both cases. */ |
| 43 direction: ltr; |
39 } | 44 } |
40 | 45 |
41 #spinnerContainer.active { | 46 #spinnerContainer.active { |
42 /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */ | 47 /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */ |
43 -webkit-animation: container-rotate 1568ms linear infinite; | 48 -webkit-animation: container-rotate 1568ms linear infinite; |
44 animation: container-rotate 1568ms linear infinite; | 49 animation: container-rotate 1568ms linear infinite; |
45 } | 50 } |
46 | 51 |
47 @-webkit-keyframes container-rotate { | 52 @-webkit-keyframes container-rotate { |
48 to { -webkit-transform: rotate(360deg) } | 53 to { -webkit-transform: rotate(360deg) } |
(...skipping 267 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
316 | 321 |
317 @-webkit-keyframes fade-out { | 322 @-webkit-keyframes fade-out { |
318 from { opacity: 0.99; } | 323 from { opacity: 0.99; } |
319 to { opacity: 0; } | 324 to { opacity: 0; } |
320 } | 325 } |
321 | 326 |
322 @keyframes fade-out { | 327 @keyframes fade-out { |
323 from { opacity: 0.99; } | 328 from { opacity: 0.99; } |
324 to { opacity: 0; } | 329 to { opacity: 0; } |
325 } | 330 } |
OLD | NEW |