| 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 |
| (...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 51 width: 100%; | 51 width: 100%; |
| 52 height: 100%; | 52 height: 100%; |
| 53 | 53 |
| 54 /* 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 |
| 55 * flipped if the direction changes. Always use ltr so that the | 55 * flipped if the direction changes. Always use ltr so that the |
| 56 * style works out correctly in both cases. */ | 56 * style works out correctly in both cases. */ |
| 57 direction: ltr; | 57 direction: ltr; |
| 58 } | 58 } |
| 59 | 59 |
| 60 #spinnerContainer.active { | 60 #spinnerContainer.active { |
| 61 -webkit-animation: container-rotate var(--paper-spinner-container-rotati
on-duration) linear infinite; | |
| 62 animation: container-rotate var(--paper-spinner-container-rotation-durat
ion) linear infinite; | 61 animation: container-rotate var(--paper-spinner-container-rotation-durat
ion) linear infinite; |
| 63 } | 62 } |
| 64 | 63 |
| 65 @-webkit-keyframes container-rotate { | |
| 66 to { -webkit-transform: rotate(360deg) } | |
| 67 } | |
| 68 | 64 |
| 69 @keyframes container-rotate { | 65 @keyframes container-rotate { |
| 70 to { transform: rotate(360deg) } | 66 to { transform: rotate(360deg) } |
| 71 } | 67 } |
| 72 | 68 |
| 73 .spinner-layer { | 69 .spinner-layer { |
| 74 position: absolute; | 70 position: absolute; |
| 75 width: 100%; | 71 width: 100%; |
| 76 height: 100%; | 72 height: 100%; |
| 77 opacity: 0; | 73 opacity: 0; |
| (...skipping 19 matching lines...) Expand all Loading... |
| 97 | 93 |
| 98 /** | 94 /** |
| 99 * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee): | 95 * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee): |
| 100 * | 96 * |
| 101 * iOS Safari (tested on iOS 8.1) does not handle animation-delay very wel
l - it doesn't | 97 * iOS Safari (tested on iOS 8.1) does not handle animation-delay very wel
l - it doesn't |
| 102 * guarantee that the animation will start _exactly_ after that value. So
we avoid using | 98 * guarantee that the animation will start _exactly_ after that value. So
we avoid using |
| 103 * animation-delay and instead set custom keyframes for each color (as lay
er-2undant as it | 99 * animation-delay and instead set custom keyframes for each color (as lay
er-2undant as it |
| 104 * seems). | 100 * seems). |
| 105 */ | 101 */ |
| 106 .active .spinner-layer { | 102 .active .spinner-layer { |
| 107 -webkit-animation-name: fill-unfill-rotate; | |
| 108 -webkit-animation-duration: var(--paper-spinner-full-cycle-duration); | |
| 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; | 103 animation-name: fill-unfill-rotate; |
| 112 animation-duration: var(--paper-spinner-full-cycle-duration); | 104 animation-duration: var(--paper-spinner-full-cycle-duration); |
| 113 animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); | 105 animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); |
| 114 animation-iteration-count: infinite; | 106 animation-iteration-count: infinite; |
| 115 opacity: 1; | 107 opacity: 1; |
| 116 } | 108 } |
| 117 | 109 |
| 118 .active .spinner-layer.layer-1 { | 110 .active .spinner-layer.layer-1 { |
| 119 -webkit-animation-name: fill-unfill-rotate, layer-1-fade-in-out; | |
| 120 animation-name: fill-unfill-rotate, layer-1-fade-in-out; | 111 animation-name: fill-unfill-rotate, layer-1-fade-in-out; |
| 121 } | 112 } |
| 122 | 113 |
| 123 .active .spinner-layer.layer-2 { | 114 .active .spinner-layer.layer-2 { |
| 124 -webkit-animation-name: fill-unfill-rotate, layer-2-fade-in-out; | |
| 125 animation-name: fill-unfill-rotate, layer-2-fade-in-out; | 115 animation-name: fill-unfill-rotate, layer-2-fade-in-out; |
| 126 } | 116 } |
| 127 | 117 |
| 128 .active .spinner-layer.layer-3 { | 118 .active .spinner-layer.layer-3 { |
| 129 -webkit-animation-name: fill-unfill-rotate, layer-3-fade-in-out; | |
| 130 animation-name: fill-unfill-rotate, layer-3-fade-in-out; | 119 animation-name: fill-unfill-rotate, layer-3-fade-in-out; |
| 131 } | 120 } |
| 132 | 121 |
| 133 .active .spinner-layer.layer-4 { | 122 .active .spinner-layer.layer-4 { |
| 134 -webkit-animation-name: fill-unfill-rotate, layer-4-fade-in-out; | |
| 135 animation-name: fill-unfill-rotate, layer-4-fade-in-out; | 123 animation-name: fill-unfill-rotate, layer-4-fade-in-out; |
| 136 } | 124 } |
| 137 | 125 |
| 138 @-webkit-keyframes fill-unfill-rotate { | |
| 139 12.5% { -webkit-transform: rotate(135deg) } /* 0.5 * ARCSIZE */ | |
| 140 25% { -webkit-transform: rotate(270deg) } /* 1 * ARCSIZE */ | |
| 141 37.5% { -webkit-transform: rotate(405deg) } /* 1.5 * ARCSIZE */ | |
| 142 50% { -webkit-transform: rotate(540deg) } /* 2 * ARCSIZE */ | |
| 143 62.5% { -webkit-transform: rotate(675deg) } /* 2.5 * ARCSIZE */ | |
| 144 75% { -webkit-transform: rotate(810deg) } /* 3 * ARCSIZE */ | |
| 145 87.5% { -webkit-transform: rotate(945deg) } /* 3.5 * ARCSIZE */ | |
| 146 to { -webkit-transform: rotate(1080deg) } /* 4 * ARCSIZE */ | |
| 147 } | |
| 148 | 126 |
| 149 @keyframes fill-unfill-rotate { | 127 @keyframes fill-unfill-rotate { |
| 150 12.5% { transform: rotate(135deg) } /* 0.5 * ARCSIZE */ | 128 12.5% { transform: rotate(135deg) } /* 0.5 * ARCSIZE */ |
| 151 25% { transform: rotate(270deg) } /* 1 * ARCSIZE */ | 129 25% { transform: rotate(270deg) } /* 1 * ARCSIZE */ |
| 152 37.5% { transform: rotate(405deg) } /* 1.5 * ARCSIZE */ | 130 37.5% { transform: rotate(405deg) } /* 1.5 * ARCSIZE */ |
| 153 50% { transform: rotate(540deg) } /* 2 * ARCSIZE */ | 131 50% { transform: rotate(540deg) } /* 2 * ARCSIZE */ |
| 154 62.5% { transform: rotate(675deg) } /* 2.5 * ARCSIZE */ | 132 62.5% { transform: rotate(675deg) } /* 2.5 * ARCSIZE */ |
| 155 75% { transform: rotate(810deg) } /* 3 * ARCSIZE */ | 133 75% { transform: rotate(810deg) } /* 3 * ARCSIZE */ |
| 156 87.5% { transform: rotate(945deg) } /* 3.5 * ARCSIZE */ | 134 87.5% { transform: rotate(945deg) } /* 3.5 * ARCSIZE */ |
| 157 to { transform: rotate(1080deg) } /* 4 * ARCSIZE */ | 135 to { transform: rotate(1080deg) } /* 4 * ARCSIZE */ |
| 158 } | 136 } |
| 159 | 137 |
| 160 @-webkit-keyframes layer-1-fade-in-out { | |
| 161 0% { opacity: 1 } | |
| 162 25% { opacity: 1 } | |
| 163 26% { opacity: 0 } | |
| 164 89% { opacity: 0 } | |
| 165 90% { opacity: 1 } | |
| 166 to { opacity: 1 } | |
| 167 } | |
| 168 | 138 |
| 169 @keyframes layer-1-fade-in-out { | 139 @keyframes layer-1-fade-in-out { |
| 170 0% { opacity: 1 } | 140 0% { opacity: 1 } |
| 171 25% { opacity: 1 } | 141 25% { opacity: 1 } |
| 172 26% { opacity: 0 } | 142 26% { opacity: 0 } |
| 173 89% { opacity: 0 } | 143 89% { opacity: 0 } |
| 174 90% { opacity: 1 } | 144 90% { opacity: 1 } |
| 175 to { opacity: 1 } | 145 to { opacity: 1 } |
| 176 } | 146 } |
| 177 | 147 |
| 178 @-webkit-keyframes layer-2-fade-in-out { | |
| 179 0% { opacity: 0 } | |
| 180 15% { opacity: 0 } | |
| 181 25% { opacity: 1 } | |
| 182 50% { opacity: 1 } | |
| 183 51% { opacity: 0 } | |
| 184 to { opacity: 0 } | |
| 185 } | |
| 186 | 148 |
| 187 @keyframes layer-2-fade-in-out { | 149 @keyframes layer-2-fade-in-out { |
| 188 0% { opacity: 0 } | 150 0% { opacity: 0 } |
| 189 15% { opacity: 0 } | 151 15% { opacity: 0 } |
| 190 25% { opacity: 1 } | 152 25% { opacity: 1 } |
| 191 50% { opacity: 1 } | 153 50% { opacity: 1 } |
| 192 51% { opacity: 0 } | 154 51% { opacity: 0 } |
| 193 to { opacity: 0 } | 155 to { opacity: 0 } |
| 194 } | 156 } |
| 195 | 157 |
| 196 @-webkit-keyframes layer-3-fade-in-out { | |
| 197 0% { opacity: 0 } | |
| 198 40% { opacity: 0 } | |
| 199 50% { opacity: 1 } | |
| 200 75% { opacity: 1 } | |
| 201 76% { opacity: 0 } | |
| 202 to { opacity: 0 } | |
| 203 } | |
| 204 | 158 |
| 205 @keyframes layer-3-fade-in-out { | 159 @keyframes layer-3-fade-in-out { |
| 206 0% { opacity: 0 } | 160 0% { opacity: 0 } |
| 207 40% { opacity: 0 } | 161 40% { opacity: 0 } |
| 208 50% { opacity: 1 } | 162 50% { opacity: 1 } |
| 209 75% { opacity: 1 } | 163 75% { opacity: 1 } |
| 210 76% { opacity: 0 } | 164 76% { opacity: 0 } |
| 211 to { opacity: 0 } | 165 to { opacity: 0 } |
| 212 } | 166 } |
| 213 | 167 |
| 214 @-webkit-keyframes layer-4-fade-in-out { | |
| 215 0% { opacity: 0 } | |
| 216 65% { opacity: 0 } | |
| 217 75% { opacity: 1 } | |
| 218 90% { opacity: 1 } | |
| 219 to { opacity: 0 } | |
| 220 } | |
| 221 | 168 |
| 222 @keyframes layer-4-fade-in-out { | 169 @keyframes layer-4-fade-in-out { |
| 223 0% { opacity: 0 } | 170 0% { opacity: 0 } |
| 224 65% { opacity: 0 } | 171 65% { opacity: 0 } |
| 225 75% { opacity: 1 } | 172 75% { opacity: 1 } |
| 226 90% { opacity: 1 } | 173 90% { opacity: 1 } |
| 227 to { opacity: 0 } | 174 to { opacity: 0 } |
| 228 } | 175 } |
| 229 | 176 |
| 230 .circle-clipper { | 177 .circle-clipper { |
| (...skipping 29 matching lines...) Expand all Loading... |
| 260 .circle-clipper::after { | 207 .circle-clipper::after { |
| 261 bottom: 0; | 208 bottom: 0; |
| 262 width: 200%; | 209 width: 200%; |
| 263 border-style: solid; | 210 border-style: solid; |
| 264 border-bottom-color: transparent !important; | 211 border-bottom-color: transparent !important; |
| 265 } | 212 } |
| 266 | 213 |
| 267 .circle-clipper.left::after { | 214 .circle-clipper.left::after { |
| 268 left: 0; | 215 left: 0; |
| 269 border-right-color: transparent !important; | 216 border-right-color: transparent !important; |
| 270 -webkit-transform: rotate(129deg); | |
| 271 transform: rotate(129deg); | 217 transform: rotate(129deg); |
| 272 } | 218 } |
| 273 | 219 |
| 274 .circle-clipper.right::after { | 220 .circle-clipper.right::after { |
| 275 left: -100%; | 221 left: -100%; |
| 276 border-left-color: transparent !important; | 222 border-left-color: transparent !important; |
| 277 -webkit-transform: rotate(-129deg); | |
| 278 transform: rotate(-129deg); | 223 transform: rotate(-129deg); |
| 279 } | 224 } |
| 280 | 225 |
| 281 .active .gap-patch::after, | 226 .active .gap-patch::after, |
| 282 .active .circle-clipper::after { | 227 .active .circle-clipper::after { |
| 283 -webkit-animation-duration: var(--paper-spinner-expand-contract-duration
); | |
| 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); | 228 animation-duration: var(--paper-spinner-expand-contract-duration); |
| 287 animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); | 229 animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); |
| 288 animation-iteration-count: infinite; | 230 animation-iteration-count: infinite; |
| 289 } | 231 } |
| 290 | 232 |
| 291 .active .circle-clipper.left::after { | 233 .active .circle-clipper.left::after { |
| 292 -webkit-animation-name: left-spin; | |
| 293 animation-name: left-spin; | 234 animation-name: left-spin; |
| 294 } | 235 } |
| 295 | 236 |
| 296 .active .circle-clipper.right::after { | 237 .active .circle-clipper.right::after { |
| 297 -webkit-animation-name: right-spin; | |
| 298 animation-name: right-spin; | 238 animation-name: right-spin; |
| 299 } | 239 } |
| 300 | 240 |
| 301 @-webkit-keyframes left-spin { | |
| 302 0% { -webkit-transform: rotate(130deg) } | |
| 303 50% { -webkit-transform: rotate(-5deg) } | |
| 304 to { -webkit-transform: rotate(130deg) } | |
| 305 } | |
| 306 | 241 |
| 307 @keyframes left-spin { | 242 @keyframes left-spin { |
| 308 0% { transform: rotate(130deg) } | 243 0% { transform: rotate(130deg) } |
| 309 50% { transform: rotate(-5deg) } | 244 50% { transform: rotate(-5deg) } |
| 310 to { transform: rotate(130deg) } | 245 to { transform: rotate(130deg) } |
| 311 } | 246 } |
| 312 | 247 |
| 313 @-webkit-keyframes right-spin { | |
| 314 0% { -webkit-transform: rotate(-130deg) } | |
| 315 50% { -webkit-transform: rotate(5deg) } | |
| 316 to { -webkit-transform: rotate(-130deg) } | |
| 317 } | |
| 318 | 248 |
| 319 @keyframes right-spin { | 249 @keyframes right-spin { |
| 320 0% { transform: rotate(-130deg) } | 250 0% { transform: rotate(-130deg) } |
| 321 50% { transform: rotate(5deg) } | 251 50% { transform: rotate(5deg) } |
| 322 to { transform: rotate(-130deg) } | 252 to { transform: rotate(-130deg) } |
| 323 } | 253 } |
| 324 | 254 |
| 325 #spinnerContainer.cooldown { | 255 #spinnerContainer.cooldown { |
| 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); | |
| 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); | 256 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); |
| 328 } | 257 } |
| 329 | 258 |
| 330 @-webkit-keyframes fade-out { | |
| 331 0% { opacity: 1 } | |
| 332 to { opacity: 0 } | |
| 333 } | |
| 334 | 259 |
| 335 @keyframes fade-out { | 260 @keyframes fade-out { |
| 336 0% { opacity: 1 } | 261 0% { opacity: 1 } |
| 337 to { opacity: 0 } | 262 to { opacity: 0 } |
| 338 } | 263 } |
| 339 </style> | 264 </style> |
| 340 </template> | 265 </template> |
| 341 </dom-module> | 266 </dom-module> |
| OLD | NEW |