| 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 |