| OLD | NEW |
| 1 /* | 1 /** |
| 2 @license | 2 @license |
| 3 Copyright (c) 2014 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://polym
er.github.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/CO
NTRIBUTORS.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/P
ATENTS.txt | 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 9 */ | |
| 10 | 9 |
| 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 } | 39 } |
| (...skipping 12 matching lines...) Expand all Loading... |
| 52 to { transform: rotate(360deg) } | 52 to { transform: rotate(360deg) } |
| 53 } | 53 } |
| 54 | 54 |
| 55 .spinner-layer { | 55 .spinner-layer { |
| 56 position: absolute; | 56 position: absolute; |
| 57 width: 100%; | 57 width: 100%; |
| 58 height: 100%; | 58 height: 100%; |
| 59 opacity: 0; | 59 opacity: 0; |
| 60 } | 60 } |
| 61 | 61 |
| 62 .blue { | 62 .layer-1 { |
| 63 border-color: #4285f4; | 63 border-color: var(--paper-spinner-layer-1-color, --google-blue-500); |
| 64 } | 64 } |
| 65 | 65 |
| 66 .red { | 66 .layer-2 { |
| 67 border-color: #db4437; | 67 border-color: var(--paper-spinner-layer-2-color, --google-red-500); |
| 68 } | 68 } |
| 69 | 69 |
| 70 .yellow { | 70 .layer-3 { |
| 71 border-color: #f4b400; | 71 border-color: var(--paper-spinner-layer-3-color, --google-yellow-500); |
| 72 } | 72 } |
| 73 | 73 |
| 74 .green { | 74 .layer-4 { |
| 75 border-color: #0f9d58; | 75 border-color: var(--paper-spinner-layer-4-color, --google-blue-500); |
| 76 } | 76 } |
| 77 | 77 |
| 78 /** | 78 /** |
| 79 * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee): | 79 * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee): |
| 80 * | 80 * |
| 81 * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it
doesn't | 81 * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it
doesn't |
| 82 * guarantee that the animation will start _exactly_ after that value. So we avo
id using | 82 * guarantee that the animation will start _exactly_ after that value. So we avo
id using |
| 83 * animation-delay and instead set custom keyframes for each color (as redundant
as it | 83 * animation-delay and instead set custom keyframes for each color (as layer-2un
dant as it |
| 84 * seems). | 84 * seems). |
| 85 * | 85 * |
| 86 * We write out each animation in full (instead of separating animation-name, | 86 * We write out each animation in full (instead of separating animation-name, |
| 87 * animation-duration, etc.) because under the polyfill, Safari does not recogni
ze those | 87 * animation-duration, etc.) because under the polyfill, Safari does not recogni
ze those |
| 88 * specific properties properly, treats them as -webkit-animation, and overrides
the | 88 * specific properties properly, treats them as -webkit-animation, and overrides
the |
| 89 * other animation rules. See https://github.com/Polymer/platform/issues/53. | 89 * other animation rules. See https://github.com/Polymer/platform/issues/53. |
| 90 */ | 90 */ |
| 91 .active .spinner-layer.blue { | 91 .active .spinner-layer.layer-1 { |
| 92 /* durations: 4 * ARCTIME */ | 92 /* durations: 4 * ARCTIME */ |
| 93 -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) in
finite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite bot
h; | 93 -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) in
finite both, layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite
both; |
| 94 animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite b
oth, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; | 94 animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite b
oth, layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; |
| 95 } | 95 } |
| 96 | 96 |
| 97 .active .spinner-layer.red { | 97 .active .spinner-layer.layer-2 { |
| 98 /* durations: 4 * ARCTIME */ | 98 /* durations: 4 * ARCTIME */ |
| 99 -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) in
finite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both
; | 99 -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) in
finite both, layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite
both; |
| 100 animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite b
oth, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; | 100 animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite b
oth, layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; |
| 101 } | 101 } |
| 102 | 102 |
| 103 .active .spinner-layer.yellow { | 103 .active .spinner-layer.layer-3 { |
| 104 /* durations: 4 * ARCTIME */ | 104 /* durations: 4 * ARCTIME */ |
| 105 -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) in
finite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite b
oth; | 105 -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) in
finite both, layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite
both; |
| 106 animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite b
oth, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; | 106 animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite b
oth, layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; |
| 107 } | 107 } |
| 108 | 108 |
| 109 .active .spinner-layer.green { | 109 .active .spinner-layer.layer-4 { |
| 110 /* durations: 4 * ARCTIME */ | 110 /* durations: 4 * ARCTIME */ |
| 111 -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) in
finite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite bo
th; | 111 -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) in
finite both, layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite
both; |
| 112 animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite b
oth, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; | 112 animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite b
oth, layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; |
| 113 } | 113 } |
| 114 | 114 |
| 115 @-webkit-keyframes fill-unfill-rotate { | 115 @-webkit-keyframes fill-unfill-rotate { |
| 116 12.5% { -webkit-transform: rotate(135deg); } /* 0.5 * ARCSIZE */ | 116 12.5% { -webkit-transform: rotate(135deg); } /* 0.5 * ARCSIZE */ |
| 117 25% { -webkit-transform: rotate(270deg); } /* 1 * ARCSIZE */ | 117 25% { -webkit-transform: rotate(270deg); } /* 1 * ARCSIZE */ |
| 118 37.5% { -webkit-transform: rotate(405deg); } /* 1.5 * ARCSIZE */ | 118 37.5% { -webkit-transform: rotate(405deg); } /* 1.5 * ARCSIZE */ |
| 119 50% { -webkit-transform: rotate(540deg); } /* 2 * ARCSIZE */ | 119 50% { -webkit-transform: rotate(540deg); } /* 2 * ARCSIZE */ |
| 120 62.5% { -webkit-transform: rotate(675deg); } /* 2.5 * ARCSIZE */ | 120 62.5% { -webkit-transform: rotate(675deg); } /* 2.5 * ARCSIZE */ |
| 121 75% { -webkit-transform: rotate(810deg); } /* 3 * ARCSIZE */ | 121 75% { -webkit-transform: rotate(810deg); } /* 3 * ARCSIZE */ |
| 122 87.5% { -webkit-transform: rotate(945deg); } /* 3.5 * ARCSIZE */ | 122 87.5% { -webkit-transform: rotate(945deg); } /* 3.5 * ARCSIZE */ |
| (...skipping 13 matching lines...) Expand all Loading... |
| 136 | 136 |
| 137 /** | 137 /** |
| 138 * HACK: Even though the intention is to have the current .spinner-layer at | 138 * HACK: Even though the intention is to have the current .spinner-layer at |
| 139 * `opacity: 1`, we set it to `opacity: 0.99` instead since this forces Chrome | 139 * `opacity: 1`, we set it to `opacity: 0.99` instead since this forces Chrome |
| 140 * to do proper subpixel rendering for the elements being animated. This is | 140 * to do proper subpixel rendering for the elements being animated. This is |
| 141 * especially visible in Chrome 39 on Ubuntu 14.04. See: | 141 * especially visible in Chrome 39 on Ubuntu 14.04. See: |
| 142 * | 142 * |
| 143 * - https://github.com/Polymer/paper-spinner/issues/9 | 143 * - https://github.com/Polymer/paper-spinner/issues/9 |
| 144 * - https://code.google.com/p/chromium/issues/detail?id=436255 | 144 * - https://code.google.com/p/chromium/issues/detail?id=436255 |
| 145 */ | 145 */ |
| 146 @-webkit-keyframes blue-fade-in-out { | 146 @-webkit-keyframes layer-1-fade-in-out { |
| 147 from { opacity: 0.99; } | 147 from { opacity: 0.99; } |
| 148 25% { opacity: 0.99; } | 148 25% { opacity: 0.99; } |
| 149 26% { opacity: 0; } | 149 26% { opacity: 0; } |
| 150 89% { opacity: 0; } | 150 89% { opacity: 0; } |
| 151 90% { opacity: 0.99; } | 151 90% { opacity: 0.99; } |
| 152 100% { opacity: 0.99; } | 152 100% { opacity: 0.99; } |
| 153 } | 153 } |
| 154 | 154 |
| 155 @keyframes blue-fade-in-out { | 155 @keyframes layer-1-fade-in-out { |
| 156 from { opacity: 0.99; } | 156 from { opacity: 0.99; } |
| 157 25% { opacity: 0.99; } | 157 25% { opacity: 0.99; } |
| 158 26% { opacity: 0; } | 158 26% { opacity: 0; } |
| 159 89% { opacity: 0; } | 159 89% { opacity: 0; } |
| 160 90% { opacity: 0.99; } | 160 90% { opacity: 0.99; } |
| 161 100% { opacity: 0.99; } | 161 100% { opacity: 0.99; } |
| 162 } | 162 } |
| 163 | 163 |
| 164 @-webkit-keyframes red-fade-in-out { | 164 @-webkit-keyframes layer-2-fade-in-out { |
| 165 from { opacity: 0; } | 165 from { opacity: 0; } |
| 166 15% { opacity: 0; } | 166 15% { opacity: 0; } |
| 167 25% { opacity: 0.99; } | 167 25% { opacity: 0.99; } |
| 168 50% { opacity: 0.99; } | 168 50% { opacity: 0.99; } |
| 169 51% { opacity: 0; } | 169 51% { opacity: 0; } |
| 170 } | 170 } |
| 171 | 171 |
| 172 @keyframes red-fade-in-out { | 172 @keyframes layer-2-fade-in-out { |
| 173 from { opacity: 0; } | 173 from { opacity: 0; } |
| 174 15% { opacity: 0; } | 174 15% { opacity: 0; } |
| 175 25% { opacity: 0.99; } | 175 25% { opacity: 0.99; } |
| 176 50% { opacity: 0.99; } | 176 50% { opacity: 0.99; } |
| 177 51% { opacity: 0; } | 177 51% { opacity: 0; } |
| 178 } | 178 } |
| 179 | 179 |
| 180 @-webkit-keyframes yellow-fade-in-out { | 180 @-webkit-keyframes layer-3-fade-in-out { |
| 181 from { opacity: 0; } | 181 from { opacity: 0; } |
| 182 40% { opacity: 0; } | 182 40% { opacity: 0; } |
| 183 50% { opacity: 0.99; } | 183 50% { opacity: 0.99; } |
| 184 75% { opacity: 0.99; } | 184 75% { opacity: 0.99; } |
| 185 76% { opacity: 0; } | 185 76% { opacity: 0; } |
| 186 } | 186 } |
| 187 | 187 |
| 188 @keyframes yellow-fade-in-out { | 188 @keyframes layer-3-fade-in-out { |
| 189 from { opacity: 0; } | 189 from { opacity: 0; } |
| 190 40% { opacity: 0; } | 190 40% { opacity: 0; } |
| 191 50% { opacity: 0.99; } | 191 50% { opacity: 0.99; } |
| 192 75% { opacity: 0.99; } | 192 75% { opacity: 0.99; } |
| 193 76% { opacity: 0; } | 193 76% { opacity: 0; } |
| 194 } | 194 } |
| 195 | 195 |
| 196 @-webkit-keyframes green-fade-in-out { | 196 @-webkit-keyframes layer-4-fade-in-out { |
| 197 from { opacity: 0; } | 197 from { opacity: 0; } |
| 198 65% { opacity: 0; } | 198 65% { opacity: 0; } |
| 199 75% { opacity: 0.99; } | 199 75% { opacity: 0.99; } |
| 200 90% { opacity: 0.99; } | 200 90% { opacity: 0.99; } |
| 201 100% { opacity: 0; } | 201 100% { opacity: 0; } |
| 202 } | 202 } |
| 203 | 203 |
| 204 @keyframes green-fade-in-out { | 204 @keyframes layer-4-fade-in-out { |
| 205 from { opacity: 0; } | 205 from { opacity: 0; } |
| 206 65% { opacity: 0; } | 206 65% { opacity: 0; } |
| 207 75% { opacity: 0.99; } | 207 75% { opacity: 0.99; } |
| 208 90% { opacity: 0.99; } | 208 90% { opacity: 0.99; } |
| 209 100% { opacity: 0; } | 209 100% { opacity: 0; } |
| 210 } | 210 } |
| 211 | 211 |
| 212 /** | 212 /** |
| 213 * Patch the gap that appear between the two adjacent div.circle-clipper while t
he | 213 * Patch the gap that appear between the two adjacent div.circle-clipper while t
he |
| 214 * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11). | 214 * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11). |
| (...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 248 .circle { | 248 .circle { |
| 249 box-sizing: border-box; | 249 box-sizing: border-box; |
| 250 height: 100%; | 250 height: 100%; |
| 251 border-width: 3px; /* STROKEWIDTH */ | 251 border-width: 3px; /* STROKEWIDTH */ |
| 252 border-style: solid; | 252 border-style: solid; |
| 253 border-color: inherit; | 253 border-color: inherit; |
| 254 border-bottom-color: transparent !important; | 254 border-bottom-color: transparent !important; |
| 255 border-radius: 50%; | 255 border-radius: 50%; |
| 256 -webkit-animation: none; | 256 -webkit-animation: none; |
| 257 animation: none; | 257 animation: none; |
| 258 |
| 259 @apply(--layout-fit); |
| 258 } | 260 } |
| 259 | 261 |
| 260 .circle-clipper.left .circle { | 262 .circle-clipper.left .circle { |
| 261 border-right-color: transparent !important; | 263 border-right-color: transparent !important; |
| 262 -webkit-transform: rotate(129deg); | 264 -webkit-transform: rotate(129deg); |
| 263 transform: rotate(129deg); | 265 transform: rotate(129deg); |
| 264 } | 266 } |
| 265 | 267 |
| 266 .circle-clipper.right .circle { | 268 .circle-clipper.right .circle { |
| 267 left: -100%; | 269 left: -100%; |
| (...skipping 46 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 314 | 316 |
| 315 @-webkit-keyframes fade-out { | 317 @-webkit-keyframes fade-out { |
| 316 from { opacity: 0.99; } | 318 from { opacity: 0.99; } |
| 317 to { opacity: 0; } | 319 to { opacity: 0; } |
| 318 } | 320 } |
| 319 | 321 |
| 320 @keyframes fade-out { | 322 @keyframes fade-out { |
| 321 from { opacity: 0.99; } | 323 from { opacity: 0.99; } |
| 322 to { opacity: 0; } | 324 to { opacity: 0; } |
| 323 } | 325 } |
| OLD | NEW |