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 |