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 |