WebCompDev / COMPONENTS

Commit e53330c0a9c942559cb35b4342f22b01b6ab6b29

Authored by Renato De Donato
1 parent 25201c03

spinner

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