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 * ARCSIZE = 270 degrees (amount of circle the arc takes up) | 21 * ARCSIZE = 270 degrees (amount of circle the arc takes up) |
22 * ARCTIME = 1333ms (time it takes to expand and contract arc) | 22 * ARCTIME = 1333ms (time it takes to expand and contract arc) |
23 * ARCSTARTROT = 216 degrees (how much the start location of the arc | 23 * ARCSTARTROT = 216 degrees (how much the start location of the arc |
24 * should rotate each time, 216 gives us a | 24 * should rotate each time, 216 gives us a |
25 * 5 pointed star shape (it's 360/5 * 3). | 25 * 5 pointed star shape (it's 360/5 * 3). |
26 * For a 7 pointed star, we might do | 26 * For a 7 pointed star, we might do |
27 * 360/7 * 3 = 154.286) | 27 * 360/7 * 3 = 154.286) |
28 * CONTAINERWIDTH = 28px | |
29 * SHRINK_TIME = 400ms | 28 * SHRINK_TIME = 400ms |
30 */ | 29 */ |
31 | 30 |
32 :host { | 31 :host { |
33 display: inline-block; | 32 display: inline-block; |
34 position: relative; | 33 position: relative; |
35 width: 28px; /* CONTAINERWIDTH */ | 34 width: 28px; |
36 height: 28px; /* CONTAINERWIDTH */ | 35 height: 28px; |
| 36 |
| 37 /* 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */ |
| 38 --paper-spinner-container-rotation-duration: 1568ms; |
| 39 |
| 40 /* ARCTIME */ |
| 41 --paper-spinner-expand-contract-duration: 1333ms; |
| 42 |
| 43 /* 4 * ARCTIME */ |
| 44 --paper-spinner-full-cycle-duration: 5332ms; |
| 45 |
| 46 /* SHRINK_TIME */ |
| 47 --paper-spinner-cooldown-duration: 400ms; |
37 } | 48 } |
38 | 49 |
39 #spinnerContainer { | 50 #spinnerContainer { |
40 width: 100%; | 51 width: 100%; |
41 height: 100%; | 52 height: 100%; |
42 | 53 |
43 /* The spinner does not have any contents that would have to be | 54 /* The spinner does not have any contents that would have to be |
44 * flipped if the direction changes. Always use ltr so that the | 55 * flipped if the direction changes. Always use ltr so that the |
45 * style works out correctly in both cases. */ | 56 * style works out correctly in both cases. */ |
46 direction: ltr; | 57 direction: ltr; |
47 } | 58 } |
48 | 59 |
49 #spinnerContainer.active { | 60 #spinnerContainer.active { |
50 /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */ | 61 -webkit-animation: container-rotate var(--paper-spinner-container-rotati
on-duration) linear infinite; |
51 -webkit-animation: container-rotate 1568ms linear infinite; | 62 animation: container-rotate var(--paper-spinner-container-rotation-durat
ion) linear infinite; |
52 animation: container-rotate 1568ms linear infinite; | |
53 } | 63 } |
54 | 64 |
55 @-webkit-keyframes container-rotate { | 65 @-webkit-keyframes container-rotate { |
56 to { -webkit-transform: rotate(360deg) } | 66 to { -webkit-transform: rotate(360deg) } |
57 } | 67 } |
58 | 68 |
59 @keyframes container-rotate { | 69 @keyframes container-rotate { |
60 to { transform: rotate(360deg) } | 70 to { transform: rotate(360deg) } |
61 } | 71 } |
62 | 72 |
(...skipping 22 matching lines...) Expand all Loading... |
85 border-color: var(--paper-spinner-layer-4-color, --google-green-500); | 95 border-color: var(--paper-spinner-layer-4-color, --google-green-500); |
86 } | 96 } |
87 | 97 |
88 /** | 98 /** |
89 * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee): | 99 * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee): |
90 * | 100 * |
91 * iOS Safari (tested on iOS 8.1) does not handle animation-delay very wel
l - it doesn't | 101 * iOS Safari (tested on iOS 8.1) does not handle animation-delay very wel
l - it doesn't |
92 * guarantee that the animation will start _exactly_ after that value. So
we avoid using | 102 * guarantee that the animation will start _exactly_ after that value. So
we avoid using |
93 * animation-delay and instead set custom keyframes for each color (as lay
er-2undant as it | 103 * animation-delay and instead set custom keyframes for each color (as lay
er-2undant as it |
94 * seems). | 104 * seems). |
95 * | |
96 * We write out each animation in full (instead of separating animation-na
me, | |
97 * animation-duration, etc.) because under the polyfill, Safari does not r
ecognize those | |
98 * specific properties properly, treats them as -webkit-animation, and ove
rrides the | |
99 * other animation rules. See https://github.com/Polymer/platform/issues/5
3. | |
100 */ | 105 */ |
101 .active .spinner-layer { | 106 .active .spinner-layer { |
102 /* durations: 4 * ARCTIME */ | 107 -webkit-animation-name: fill-unfill-rotate; |
103 -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2,
1) infinite both; | 108 -webkit-animation-duration: var(--paper-spinner-full-cycle-duration); |
104 animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infi
nite both; | 109 -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); |
| 110 -webkit-animation-iteration-count: infinite; |
| 111 animation-name: fill-unfill-rotate; |
| 112 animation-duration: var(--paper-spinner-full-cycle-duration); |
| 113 animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); |
| 114 animation-iteration-count: infinite; |
105 opacity: 1; | 115 opacity: 1; |
106 } | 116 } |
107 | 117 |
108 .active .spinner-layer.layer-1 { | 118 .active .spinner-layer.layer-1 { |
109 /* durations: 4 * ARCTIME */ | 119 -webkit-animation-name: fill-unfill-rotate, layer-1-fade-in-out; |
110 -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2,
1) infinite both, layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) inf
inite both; | 120 animation-name: fill-unfill-rotate, layer-1-fade-in-out; |
111 animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infi
nite both, layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite bo
th; | |
112 } | 121 } |
113 | 122 |
114 .active .spinner-layer.layer-2 { | 123 .active .spinner-layer.layer-2 { |
115 /* durations: 4 * ARCTIME */ | 124 -webkit-animation-name: fill-unfill-rotate, layer-2-fade-in-out; |
116 -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2,
1) infinite both, layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) inf
inite both; | 125 animation-name: fill-unfill-rotate, layer-2-fade-in-out; |
117 animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infi
nite both, layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite bo
th; | |
118 } | 126 } |
119 | 127 |
120 .active .spinner-layer.layer-3 { | 128 .active .spinner-layer.layer-3 { |
121 /* durations: 4 * ARCTIME */ | 129 -webkit-animation-name: fill-unfill-rotate, layer-3-fade-in-out; |
122 -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2,
1) infinite both, layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) inf
inite both; | 130 animation-name: fill-unfill-rotate, layer-3-fade-in-out; |
123 animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infi
nite both, layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite bo
th; | |
124 } | 131 } |
125 | 132 |
126 .active .spinner-layer.layer-4 { | 133 .active .spinner-layer.layer-4 { |
127 /* durations: 4 * ARCTIME */ | 134 -webkit-animation-name: fill-unfill-rotate, layer-4-fade-in-out; |
128 -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2,
1) infinite both, layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) inf
inite both; | 135 animation-name: fill-unfill-rotate, layer-4-fade-in-out; |
129 animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infi
nite both, layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite bo
th; | |
130 } | 136 } |
131 | 137 |
132 @-webkit-keyframes fill-unfill-rotate { | 138 @-webkit-keyframes fill-unfill-rotate { |
133 12.5% { -webkit-transform: rotate(135deg); } /* 0.5 * ARCSIZE */ | 139 12.5% { -webkit-transform: rotate(135deg) } /* 0.5 * ARCSIZE */ |
134 25% { -webkit-transform: rotate(270deg); } /* 1 * ARCSIZE */ | 140 25% { -webkit-transform: rotate(270deg) } /* 1 * ARCSIZE */ |
135 37.5% { -webkit-transform: rotate(405deg); } /* 1.5 * ARCSIZE */ | 141 37.5% { -webkit-transform: rotate(405deg) } /* 1.5 * ARCSIZE */ |
136 50% { -webkit-transform: rotate(540deg); } /* 2 * ARCSIZE */ | 142 50% { -webkit-transform: rotate(540deg) } /* 2 * ARCSIZE */ |
137 62.5% { -webkit-transform: rotate(675deg); } /* 2.5 * ARCSIZE */ | 143 62.5% { -webkit-transform: rotate(675deg) } /* 2.5 * ARCSIZE */ |
138 75% { -webkit-transform: rotate(810deg); } /* 3 * ARCSIZE */ | 144 75% { -webkit-transform: rotate(810deg) } /* 3 * ARCSIZE */ |
139 87.5% { -webkit-transform: rotate(945deg); } /* 3.5 * ARCSIZE */ | 145 87.5% { -webkit-transform: rotate(945deg) } /* 3.5 * ARCSIZE */ |
140 to { -webkit-transform: rotate(1080deg); } /* 4 * ARCSIZE */ | 146 to { -webkit-transform: rotate(1080deg) } /* 4 * ARCSIZE */ |
141 } | 147 } |
142 | 148 |
143 @keyframes fill-unfill-rotate { | 149 @keyframes fill-unfill-rotate { |
144 12.5% { transform: rotate(135deg); } /* 0.5 * ARCSIZE */ | 150 12.5% { transform: rotate(135deg) } /* 0.5 * ARCSIZE */ |
145 25% { transform: rotate(270deg); } /* 1 * ARCSIZE */ | 151 25% { transform: rotate(270deg) } /* 1 * ARCSIZE */ |
146 37.5% { transform: rotate(405deg); } /* 1.5 * ARCSIZE */ | 152 37.5% { transform: rotate(405deg) } /* 1.5 * ARCSIZE */ |
147 50% { transform: rotate(540deg); } /* 2 * ARCSIZE */ | 153 50% { transform: rotate(540deg) } /* 2 * ARCSIZE */ |
148 62.5% { transform: rotate(675deg); } /* 2.5 * ARCSIZE */ | 154 62.5% { transform: rotate(675deg) } /* 2.5 * ARCSIZE */ |
149 75% { transform: rotate(810deg); } /* 3 * ARCSIZE */ | 155 75% { transform: rotate(810deg) } /* 3 * ARCSIZE */ |
150 87.5% { transform: rotate(945deg); } /* 3.5 * ARCSIZE */ | 156 87.5% { transform: rotate(945deg) } /* 3.5 * ARCSIZE */ |
151 to { transform: rotate(1080deg); } /* 4 * ARCSIZE */ | 157 to { transform: rotate(1080deg) } /* 4 * ARCSIZE */ |
152 } | 158 } |
153 | 159 |
154 /** | |
155 * HACK: Even though the intention is to have the current .spinner-layer a
t | |
156 * `opacity: 1`, we set it to `opacity: 0.99` instead since this forces Ch
rome | |
157 * to do proper subpixel rendering for the elements being animated. This i
s | |
158 * especially visible in Chrome 39 on Ubuntu 14.04. See: | |
159 * | |
160 * - https://github.com/Polymer/paper-spinner/issues/9 | |
161 * - https://code.google.com/p/chromium/issues/detail?id=436255 | |
162 */ | |
163 @-webkit-keyframes layer-1-fade-in-out { | 160 @-webkit-keyframes layer-1-fade-in-out { |
164 from { opacity: 0.99; } | 161 0% { opacity: 1 } |
165 25% { opacity: 0.99; } | 162 25% { opacity: 1 } |
166 26% { opacity: 0; } | 163 26% { opacity: 0 } |
167 89% { opacity: 0; } | 164 89% { opacity: 0 } |
168 90% { opacity: 0.99; } | 165 90% { opacity: 1 } |
169 100% { opacity: 0.99; } | 166 to { opacity: 1 } |
170 } | 167 } |
171 | 168 |
172 @keyframes layer-1-fade-in-out { | 169 @keyframes layer-1-fade-in-out { |
173 from { opacity: 0.99; } | 170 0% { opacity: 1 } |
174 25% { opacity: 0.99; } | 171 25% { opacity: 1 } |
175 26% { opacity: 0; } | 172 26% { opacity: 0 } |
176 89% { opacity: 0; } | 173 89% { opacity: 0 } |
177 90% { opacity: 0.99; } | 174 90% { opacity: 1 } |
178 100% { opacity: 0.99; } | 175 to { opacity: 1 } |
179 } | 176 } |
180 | 177 |
181 @-webkit-keyframes layer-2-fade-in-out { | 178 @-webkit-keyframes layer-2-fade-in-out { |
182 from { opacity: 0; } | 179 0% { opacity: 0 } |
183 15% { opacity: 0; } | 180 15% { opacity: 0 } |
184 25% { opacity: 0.99; } | 181 25% { opacity: 1 } |
185 50% { opacity: 0.99; } | 182 50% { opacity: 1 } |
186 51% { opacity: 0; } | 183 51% { opacity: 0 } |
| 184 to { opacity: 0 } |
187 } | 185 } |
188 | 186 |
189 @keyframes layer-2-fade-in-out { | 187 @keyframes layer-2-fade-in-out { |
190 from { opacity: 0; } | 188 0% { opacity: 0 } |
191 15% { opacity: 0; } | 189 15% { opacity: 0 } |
192 25% { opacity: 0.99; } | 190 25% { opacity: 1 } |
193 50% { opacity: 0.99; } | 191 50% { opacity: 1 } |
194 51% { opacity: 0; } | 192 51% { opacity: 0 } |
| 193 to { opacity: 0 } |
195 } | 194 } |
196 | 195 |
197 @-webkit-keyframes layer-3-fade-in-out { | 196 @-webkit-keyframes layer-3-fade-in-out { |
198 from { opacity: 0; } | 197 0% { opacity: 0 } |
199 40% { opacity: 0; } | 198 40% { opacity: 0 } |
200 50% { opacity: 0.99; } | 199 50% { opacity: 1 } |
201 75% { opacity: 0.99; } | 200 75% { opacity: 1 } |
202 76% { opacity: 0; } | 201 76% { opacity: 0 } |
| 202 to { opacity: 0 } |
203 } | 203 } |
204 | 204 |
205 @keyframes layer-3-fade-in-out { | 205 @keyframes layer-3-fade-in-out { |
206 from { opacity: 0; } | 206 0% { opacity: 0 } |
207 40% { opacity: 0; } | 207 40% { opacity: 0 } |
208 50% { opacity: 0.99; } | 208 50% { opacity: 1 } |
209 75% { opacity: 0.99; } | 209 75% { opacity: 1 } |
210 76% { opacity: 0; } | 210 76% { opacity: 0 } |
| 211 to { opacity: 0 } |
211 } | 212 } |
212 | 213 |
213 @-webkit-keyframes layer-4-fade-in-out { | 214 @-webkit-keyframes layer-4-fade-in-out { |
214 from { opacity: 0; } | 215 0% { opacity: 0 } |
215 65% { opacity: 0; } | 216 65% { opacity: 0 } |
216 75% { opacity: 0.99; } | 217 75% { opacity: 1 } |
217 90% { opacity: 0.99; } | 218 90% { opacity: 1 } |
218 100% { opacity: 0; } | 219 to { opacity: 0 } |
219 } | 220 } |
220 | 221 |
221 @keyframes layer-4-fade-in-out { | 222 @keyframes layer-4-fade-in-out { |
222 from { opacity: 0; } | 223 0% { opacity: 0 } |
223 65% { opacity: 0; } | 224 65% { opacity: 0 } |
224 75% { opacity: 0.99; } | 225 75% { opacity: 1 } |
225 90% { opacity: 0.99; } | 226 90% { opacity: 1 } |
226 100% { opacity: 0; } | 227 to { opacity: 0 } |
227 } | |
228 | |
229 /** | |
230 * Patch the gap that appear between the two adjacent div.circle-clipper w
hile the | |
231 * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11). | |
232 * | |
233 * Update: the gap no longer appears on Chrome when .spinner-layer's opaci
ty is 0.99, | |
234 * but still does on Safari and IE. | |
235 */ | |
236 .gap-patch { | |
237 position: absolute; | |
238 box-sizing: border-box; | |
239 top: 0; | |
240 left: 45%; | |
241 width: 10%; | |
242 height: 100%; | |
243 overflow: hidden; | |
244 border-color: inherit; | |
245 } | |
246 | |
247 .gap-patch .circle { | |
248 width: 1000%; | |
249 left: -450%; | |
250 } | 228 } |
251 | 229 |
252 .circle-clipper { | 230 .circle-clipper { |
253 display: inline-block; | 231 display: inline-block; |
254 position: relative; | 232 position: relative; |
255 width: 50%; | 233 width: 50%; |
256 height: 100%; | 234 height: 100%; |
257 overflow: hidden; | 235 overflow: hidden; |
258 border-color: inherit; | 236 border-color: inherit; |
259 } | 237 } |
260 | 238 |
261 .circle-clipper .circle { | 239 /** |
262 width: 200%; | 240 * Patch the gap that appear between the two adjacent div.circle-clipper w
hile the |
| 241 * spinner is rotating (appears on Chrome 50, Safari 9.1.1, and Edge). |
| 242 */ |
| 243 .spinner-layer::after { |
| 244 left: 45%; |
| 245 width: 10%; |
| 246 border-top-style: solid; |
263 } | 247 } |
264 | 248 |
265 .circle { | 249 .spinner-layer::after, |
| 250 .circle-clipper::after { |
| 251 content: ''; |
266 box-sizing: border-box; | 252 box-sizing: border-box; |
267 height: 100%; | 253 position: absolute; |
268 border-width: var(--paper-spinner-stroke-width, 3px); /* STROKEWIDTH */ | 254 top: 0; |
269 border-style: solid; | 255 border-width: var(--paper-spinner-stroke-width, 3px); |
270 border-color: inherit; | 256 border-color: inherit; |
271 border-bottom-color: transparent !important; | |
272 border-radius: 50%; | 257 border-radius: 50%; |
273 -webkit-animation: none; | |
274 animation: none; | |
275 | |
276 @apply(--layout-fit); | |
277 } | 258 } |
278 | 259 |
279 .circle-clipper.left .circle { | 260 .circle-clipper::after { |
| 261 bottom: 0; |
| 262 width: 200%; |
| 263 border-style: solid; |
| 264 border-bottom-color: transparent !important; |
| 265 } |
| 266 |
| 267 .circle-clipper.left::after { |
| 268 left: 0; |
280 border-right-color: transparent !important; | 269 border-right-color: transparent !important; |
281 -webkit-transform: rotate(129deg); | 270 -webkit-transform: rotate(129deg); |
282 transform: rotate(129deg); | 271 transform: rotate(129deg); |
283 } | 272 } |
284 | 273 |
285 .circle-clipper.right .circle { | 274 .circle-clipper.right::after { |
286 left: -100%; | 275 left: -100%; |
287 border-left-color: transparent !important; | 276 border-left-color: transparent !important; |
288 -webkit-transform: rotate(-129deg); | 277 -webkit-transform: rotate(-129deg); |
289 transform: rotate(-129deg); | 278 transform: rotate(-129deg); |
290 } | 279 } |
291 | 280 |
292 .active .circle-clipper.left .circle { | 281 .active .gap-patch::after, |
293 /* duration: ARCTIME */ | 282 .active .circle-clipper::after { |
294 -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infin
ite both; | 283 -webkit-animation-duration: var(--paper-spinner-expand-contract-duration
); |
295 animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both
; | 284 -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); |
| 285 -webkit-animation-iteration-count: infinite; |
| 286 animation-duration: var(--paper-spinner-expand-contract-duration); |
| 287 animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); |
| 288 animation-iteration-count: infinite; |
296 } | 289 } |
297 | 290 |
298 .active .circle-clipper.right .circle { | 291 .active .circle-clipper.left::after { |
299 /* duration: ARCTIME */ | 292 -webkit-animation-name: left-spin; |
300 -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infi
nite both; | 293 animation-name: left-spin; |
301 animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite bot
h; | 294 } |
| 295 |
| 296 .active .circle-clipper.right::after { |
| 297 -webkit-animation-name: right-spin; |
| 298 animation-name: right-spin; |
302 } | 299 } |
303 | 300 |
304 @-webkit-keyframes left-spin { | 301 @-webkit-keyframes left-spin { |
305 from { -webkit-transform: rotate(130deg); } | 302 0% { -webkit-transform: rotate(130deg) } |
306 50% { -webkit-transform: rotate(-5deg); } | 303 50% { -webkit-transform: rotate(-5deg) } |
307 to { -webkit-transform: rotate(130deg); } | 304 to { -webkit-transform: rotate(130deg) } |
308 } | 305 } |
309 | 306 |
310 @keyframes left-spin { | 307 @keyframes left-spin { |
311 from { transform: rotate(130deg); } | 308 0% { transform: rotate(130deg) } |
312 50% { transform: rotate(-5deg); } | 309 50% { transform: rotate(-5deg) } |
313 to { transform: rotate(130deg); } | 310 to { transform: rotate(130deg) } |
314 } | 311 } |
315 | 312 |
316 @-webkit-keyframes right-spin { | 313 @-webkit-keyframes right-spin { |
317 from { -webkit-transform: rotate(-130deg); } | 314 0% { -webkit-transform: rotate(-130deg) } |
318 50% { -webkit-transform: rotate(5deg); } | 315 50% { -webkit-transform: rotate(5deg) } |
319 to { -webkit-transform: rotate(-130deg); } | 316 to { -webkit-transform: rotate(-130deg) } |
320 } | 317 } |
321 | 318 |
322 @keyframes right-spin { | 319 @keyframes right-spin { |
323 from { transform: rotate(-130deg); } | 320 0% { transform: rotate(-130deg) } |
324 50% { transform: rotate(5deg); } | 321 50% { transform: rotate(5deg) } |
325 to { transform: rotate(-130deg); } | 322 to { transform: rotate(-130deg) } |
326 } | 323 } |
327 | 324 |
328 #spinnerContainer.cooldown { | 325 #spinnerContainer.cooldown { |
329 /* duration: SHRINK_TIME */ | 326 -webkit-animation: container-rotate var(--paper-spinner-container-rotati
on-duration) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cu
bic-bezier(0.4, 0.0, 0.2, 1); |
330 -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400
ms cubic-bezier(0.4, 0.0, 0.2, 1); | 327 animation: container-rotate var(--paper-spinner-container-rotation-durat
ion) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezi
er(0.4, 0.0, 0.2, 1); |
331 animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic
-bezier(0.4, 0.0, 0.2, 1); | |
332 } | 328 } |
333 | 329 |
334 @-webkit-keyframes fade-out { | 330 @-webkit-keyframes fade-out { |
335 from { opacity: 0.99; } | 331 0% { opacity: 1 } |
336 to { opacity: 0; } | 332 to { opacity: 0 } |
337 } | 333 } |
338 | 334 |
339 @keyframes fade-out { | 335 @keyframes fade-out { |
340 from { opacity: 0.99; } | 336 0% { opacity: 1 } |
341 to { opacity: 0; } | 337 to { opacity: 0 } |
342 } | 338 } |
343 </style> | 339 </style> |
344 </template> | 340 </template> |
345 </dom-module> | 341 </dom-module> |
OLD | NEW |