| 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 <dom-module id="paper-spinner-styles"> | 11 <dom-module id="paper-spinner-styles"> |
| 12 <template> | 12 <template> |
| 13 <style> | 13 <style> |
| 14 /* | 14 /* |
| 15 /**************************/ | 15 /**************************/ |
| 16 /* STYLES FOR THE SPINNER */ | 16 /* STYLES FOR THE SPINNER */ |
| 17 /**************************/ | 17 /**************************/ |
| 18 | 18 |
| 19 /* | 19 /* |
| 20 * Constants: | 20 * Constants: |
| 21 * STROKEWIDTH = 3px | |
| 22 * ARCSIZE = 270 degrees (amount of circle the arc takes up) | 21 * ARCSIZE = 270 degrees (amount of circle the arc takes up) |
| 23 * ARCTIME = 1333ms (time it takes to expand and contract arc) | 22 * ARCTIME = 1333ms (time it takes to expand and contract arc) |
| 24 * ARCSTARTROT = 216 degrees (how much the start location of the arc | 23 * ARCSTARTROT = 216 degrees (how much the start location of the arc |
| 25 * should rotate each time, 216 gives us a | 24 * should rotate each time, 216 gives us a |
| 26 * 5 pointed star shape (it's 360/5 * 3). | 25 * 5 pointed star shape (it's 360/5 * 3). |
| 27 * For a 7 pointed star, we might do | 26 * For a 7 pointed star, we might do |
| 28 * 360/7 * 3 = 154.286) | 27 * 360/7 * 3 = 154.286) |
| 29 * CONTAINERWIDTH = 28px | 28 * CONTAINERWIDTH = 28px |
| 30 * SHRINK_TIME = 400ms | 29 * SHRINK_TIME = 400ms |
| 31 */ | 30 */ |
| (...skipping 227 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 259 border-color: inherit; | 258 border-color: inherit; |
| 260 } | 259 } |
| 261 | 260 |
| 262 .circle-clipper .circle { | 261 .circle-clipper .circle { |
| 263 width: 200%; | 262 width: 200%; |
| 264 } | 263 } |
| 265 | 264 |
| 266 .circle { | 265 .circle { |
| 267 box-sizing: border-box; | 266 box-sizing: border-box; |
| 268 height: 100%; | 267 height: 100%; |
| 269 border-width: 3px; /* STROKEWIDTH */ | 268 border-width: var(--paper-spinner-stroke-width, 3px); /* STROKEWIDTH */ |
| 270 border-style: solid; | 269 border-style: solid; |
| 271 border-color: inherit; | 270 border-color: inherit; |
| 272 border-bottom-color: transparent !important; | 271 border-bottom-color: transparent !important; |
| 273 border-radius: 50%; | 272 border-radius: 50%; |
| 274 -webkit-animation: none; | 273 -webkit-animation: none; |
| 275 animation: none; | 274 animation: none; |
| 276 | 275 |
| 277 @apply(--layout-fit); | 276 @apply(--layout-fit); |
| 278 } | 277 } |
| 279 | 278 |
| (...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 337 to { opacity: 0; } | 336 to { opacity: 0; } |
| 338 } | 337 } |
| 339 | 338 |
| 340 @keyframes fade-out { | 339 @keyframes fade-out { |
| 341 from { opacity: 0.99; } | 340 from { opacity: 0.99; } |
| 342 to { opacity: 0; } | 341 to { opacity: 0; } |
| 343 } | 342 } |
| 344 </style> | 343 </style> |
| 345 </template> | 344 </template> |
| 346 </dom-module> | 345 </dom-module> |
| OLD | NEW |