UNPKG

30.8 kBCSSView Raw
1/*!
2 * # Fomantic-UI 2.8.8 - Loader
3 * http://github.com/fomantic/Fomantic-UI/
4 *
5 *
6 * Released under the MIT license
7 * http://opensource.org/licenses/MIT
8 *
9 */
10
11
12/*******************************
13 Loader
14*******************************/
15
16
17/* Standard Size */
18.ui.loader {
19 display: none;
20 position: absolute;
21 top: 50%;
22 left: 50%;
23 margin: 0;
24 text-align: center;
25 z-index: 1000;
26 -webkit-transform: translateX(-50%) translateY(-50%);
27 transform: translateX(-50%) translateY(-50%);
28}
29
30/* Static Shape */
31.ui.loader:before {
32 position: absolute;
33 content: '';
34 top: 0;
35 left: 50%;
36 width: 100%;
37 height: 100%;
38 border-radius: 500rem;
39 border: 0.2em solid rgba(0, 0, 0, 0.1);
40}
41
42/* Active Shape */
43.ui.loader:after {
44 position: absolute;
45 content: '';
46 top: 0;
47 left: 50%;
48 width: 100%;
49 height: 100%;
50 -webkit-animation: loader 0.6s infinite linear;
51 animation: loader 0.6s infinite linear;
52 border: 0.2em solid #767676;
53 border-radius: 500rem;
54 -webkit-box-shadow: 0 0 0 1px transparent;
55 box-shadow: 0 0 0 1px transparent;
56}
57
58/* Speeds */
59.ui.fast.loading.loading:after,
60.ui.fast.loading.loading .input > i.icon:after,
61.ui.fast.loading.loading > i.icon:after,
62.ui.fast.loader:after {
63 -webkit-animation-duration: 0.3s;
64 animation-duration: 0.3s;
65}
66.ui.slow.loading.loading:after,
67.ui.slow.loading.loading .input > i.icon:after,
68.ui.slow.loading.loading > i.icon:after,
69.ui.slow.loader:after {
70 -webkit-animation-duration: 0.9s;
71 animation-duration: 0.9s;
72}
73
74/* Active Animation */
75@-webkit-keyframes loader {
76 100% {
77 -webkit-transform: rotate(360deg);
78 transform: rotate(360deg);
79 }
80}
81@keyframes loader {
82 100% {
83 -webkit-transform: rotate(360deg);
84 transform: rotate(360deg);
85 }
86}
87
88/*-------------------
89 Coupling
90--------------------*/
91
92
93/* Show inside active dimmer */
94.ui.dimmer > .loader {
95 display: block;
96}
97
98/* Black Dimmer */
99.ui.dimmer > .ui.loader {
100 color: rgba(255, 255, 255, 0.9);
101}
102.ui.dimmer > .ui.loader:not(.elastic):before {
103 border-color: rgba(255, 255, 255, 0.15);
104}
105
106/* White Dimmer (Inverted) */
107.ui.inverted.dimmer > .ui.loader {
108 color: rgba(0, 0, 0, 0.87);
109}
110.ui.inverted.dimmer > .ui.loader:not(.elastic):before {
111 border-color: rgba(0, 0, 0, 0.1);
112}
113
114
115/*******************************
116 Types
117*******************************/
118
119
120/*-------------------
121 Text
122 --------------------*/
123
124.ui.ui.ui.ui.text.loader {
125 width: auto;
126 height: auto;
127 text-align: center;
128 font-style: normal;
129}
130
131
132/*******************************
133 States
134*******************************/
135
136.ui.indeterminate.loader:after {
137 animation-direction: reverse;
138 -webkit-animation-duration: 1.2s;
139 animation-duration: 1.2s;
140}
141.ui.loader.active,
142.ui.loader.visible {
143 display: block;
144}
145.ui.loader.disabled,
146.ui.loader.hidden {
147 display: none;
148}
149
150
151/*******************************
152 Variations
153*******************************/
154
155
156/*-------------------
157 Sizes
158--------------------*/
159
160.ui.loader {
161 width: 2.28571429rem;
162 height: 2.28571429rem;
163 font-size: 1em;
164}
165.ui.loader:before,
166.ui.loader:after {
167 width: 2.28571429rem;
168 height: 2.28571429rem;
169 margin: 0 0 0 -1.14285714rem;
170}
171.ui.text.loader {
172 min-width: 2.28571429rem;
173 padding-top: 3.07142857rem;
174}
175.ui.mini.loader {
176 width: 1rem;
177 height: 1rem;
178 font-size: 0.78571429em;
179}
180.ui.mini.loader:before,
181.ui.mini.loader:after {
182 width: 1rem;
183 height: 1rem;
184 margin: 0 0 0 -0.5rem;
185}
186.ui.mini.text.loader {
187 min-width: 1rem;
188 padding-top: 1.78571429rem;
189}
190.ui.tiny.loader {
191 width: 1.14285714rem;
192 height: 1.14285714rem;
193 font-size: 0.85714286em;
194}
195.ui.tiny.loader:before,
196.ui.tiny.loader:after {
197 width: 1.14285714rem;
198 height: 1.14285714rem;
199 margin: 0 0 0 -0.57142857rem;
200}
201.ui.tiny.text.loader {
202 min-width: 1.14285714rem;
203 padding-top: 1.92857143rem;
204}
205.ui.small.loader {
206 width: 1.71428571rem;
207 height: 1.71428571rem;
208 font-size: 0.92857143em;
209}
210.ui.small.loader:before,
211.ui.small.loader:after {
212 width: 1.71428571rem;
213 height: 1.71428571rem;
214 margin: 0 0 0 -0.85714286rem;
215}
216.ui.small.text.loader {
217 min-width: 1.71428571rem;
218 padding-top: 2.5rem;
219}
220.ui.large.loader {
221 width: 3.42857143rem;
222 height: 3.42857143rem;
223 font-size: 1.14285714em;
224}
225.ui.large.loader:before,
226.ui.large.loader:after {
227 width: 3.42857143rem;
228 height: 3.42857143rem;
229 margin: 0 0 0 -1.71428571rem;
230}
231.ui.large.text.loader {
232 min-width: 3.42857143rem;
233 padding-top: 4.21428571rem;
234}
235.ui.big.loader {
236 width: 3.71428571rem;
237 height: 3.71428571rem;
238 font-size: 1.28571429em;
239}
240.ui.big.loader:before,
241.ui.big.loader:after {
242 width: 3.71428571rem;
243 height: 3.71428571rem;
244 margin: 0 0 0 -1.85714286rem;
245}
246.ui.big.text.loader {
247 min-width: 3.71428571rem;
248 padding-top: 4.5rem;
249}
250.ui.huge.loader {
251 width: 4.14285714rem;
252 height: 4.14285714rem;
253 font-size: 1.42857143em;
254}
255.ui.huge.loader:before,
256.ui.huge.loader:after {
257 width: 4.14285714rem;
258 height: 4.14285714rem;
259 margin: 0 0 0 -2.07142857rem;
260}
261.ui.huge.text.loader {
262 min-width: 4.14285714rem;
263 padding-top: 4.92857143rem;
264}
265.ui.massive.loader {
266 width: 4.57142857rem;
267 height: 4.57142857rem;
268 font-size: 1.71428571em;
269}
270.ui.massive.loader:before,
271.ui.massive.loader:after {
272 width: 4.57142857rem;
273 height: 4.57142857rem;
274 margin: 0 0 0 -2.28571429rem;
275}
276.ui.massive.text.loader {
277 min-width: 4.57142857rem;
278 padding-top: 5.35714286rem;
279}
280
281/*-------------------
282 Colors
283--------------------*/
284
285.ui.primary.elastic.loader.loader:before,
286.ui.primary.basic.elastic.loading.button:before,
287.ui.primary.basic.elastic.loading.button:after,
288.ui.primary.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
289.ui.primary.elastic.loading.loading.loading .input > i.icon:before,
290.ui.primary.elastic.loading.loading.loading.loading > i.icon:before,
291.ui.primary.loading.loading.loading.loading:not(.usual):not(.button):after,
292.ui.primary.loading.loading.loading.loading .input > i.icon:after,
293.ui.primary.loading.loading.loading.loading > i.icon:after,
294.ui.primary.loader.loader.loader:after {
295 color: #2185D0;
296}
297.ui.inverted.primary.elastic.loader:before,
298.ui.inverted.primary.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
299.ui.inverted.primary.elastic.loading.loading.loading .input > i.icon:before,
300.ui.inverted.primary.elastic.loading.loading.loading > i.icon:before,
301.ui.inverted.primary.loading.loading.loading.loading:not(.usual):after,
302.ui.inverted.primary.loading.loading.loading.loading .input > i.icon:after,
303.ui.inverted.primary.loading.loading.loading.loading > i.icon:after,
304.ui.inverted.primary.loader.loader.loader:after {
305 color: #54C8FF;
306}
307.ui.secondary.elastic.loader.loader:before,
308.ui.secondary.basic.elastic.loading.button:before,
309.ui.secondary.basic.elastic.loading.button:after,
310.ui.secondary.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
311.ui.secondary.elastic.loading.loading.loading .input > i.icon:before,
312.ui.secondary.elastic.loading.loading.loading.loading > i.icon:before,
313.ui.secondary.loading.loading.loading.loading:not(.usual):not(.button):after,
314.ui.secondary.loading.loading.loading.loading .input > i.icon:after,
315.ui.secondary.loading.loading.loading.loading > i.icon:after,
316.ui.secondary.loader.loader.loader:after {
317 color: #1B1C1D;
318}
319.ui.inverted.secondary.elastic.loader:before,
320.ui.inverted.secondary.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
321.ui.inverted.secondary.elastic.loading.loading.loading .input > i.icon:before,
322.ui.inverted.secondary.elastic.loading.loading.loading > i.icon:before,
323.ui.inverted.secondary.loading.loading.loading.loading:not(.usual):after,
324.ui.inverted.secondary.loading.loading.loading.loading .input > i.icon:after,
325.ui.inverted.secondary.loading.loading.loading.loading > i.icon:after,
326.ui.inverted.secondary.loader.loader.loader:after {
327 color: #545454;
328}
329.ui.red.elastic.loader.loader:before,
330.ui.red.basic.elastic.loading.button:before,
331.ui.red.basic.elastic.loading.button:after,
332.ui.red.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
333.ui.red.elastic.loading.loading.loading .input > i.icon:before,
334.ui.red.elastic.loading.loading.loading.loading > i.icon:before,
335.ui.red.loading.loading.loading.loading:not(.usual):not(.button):after,
336.ui.red.loading.loading.loading.loading .input > i.icon:after,
337.ui.red.loading.loading.loading.loading > i.icon:after,
338.ui.red.loader.loader.loader:after {
339 color: #DB2828;
340}
341.ui.inverted.red.elastic.loader:before,
342.ui.inverted.red.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
343.ui.inverted.red.elastic.loading.loading.loading .input > i.icon:before,
344.ui.inverted.red.elastic.loading.loading.loading > i.icon:before,
345.ui.inverted.red.loading.loading.loading.loading:not(.usual):after,
346.ui.inverted.red.loading.loading.loading.loading .input > i.icon:after,
347.ui.inverted.red.loading.loading.loading.loading > i.icon:after,
348.ui.inverted.red.loader.loader.loader:after {
349 color: #FF695E;
350}
351.ui.orange.elastic.loader.loader:before,
352.ui.orange.basic.elastic.loading.button:before,
353.ui.orange.basic.elastic.loading.button:after,
354.ui.orange.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
355.ui.orange.elastic.loading.loading.loading .input > i.icon:before,
356.ui.orange.elastic.loading.loading.loading.loading > i.icon:before,
357.ui.orange.loading.loading.loading.loading:not(.usual):not(.button):after,
358.ui.orange.loading.loading.loading.loading .input > i.icon:after,
359.ui.orange.loading.loading.loading.loading > i.icon:after,
360.ui.orange.loader.loader.loader:after {
361 color: #F2711C;
362}
363.ui.inverted.orange.elastic.loader:before,
364.ui.inverted.orange.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
365.ui.inverted.orange.elastic.loading.loading.loading .input > i.icon:before,
366.ui.inverted.orange.elastic.loading.loading.loading > i.icon:before,
367.ui.inverted.orange.loading.loading.loading.loading:not(.usual):after,
368.ui.inverted.orange.loading.loading.loading.loading .input > i.icon:after,
369.ui.inverted.orange.loading.loading.loading.loading > i.icon:after,
370.ui.inverted.orange.loader.loader.loader:after {
371 color: #FF851B;
372}
373.ui.yellow.elastic.loader.loader:before,
374.ui.yellow.basic.elastic.loading.button:before,
375.ui.yellow.basic.elastic.loading.button:after,
376.ui.yellow.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
377.ui.yellow.elastic.loading.loading.loading .input > i.icon:before,
378.ui.yellow.elastic.loading.loading.loading.loading > i.icon:before,
379.ui.yellow.loading.loading.loading.loading:not(.usual):not(.button):after,
380.ui.yellow.loading.loading.loading.loading .input > i.icon:after,
381.ui.yellow.loading.loading.loading.loading > i.icon:after,
382.ui.yellow.loader.loader.loader:after {
383 color: #FBBD08;
384}
385.ui.inverted.yellow.elastic.loader:before,
386.ui.inverted.yellow.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
387.ui.inverted.yellow.elastic.loading.loading.loading .input > i.icon:before,
388.ui.inverted.yellow.elastic.loading.loading.loading > i.icon:before,
389.ui.inverted.yellow.loading.loading.loading.loading:not(.usual):after,
390.ui.inverted.yellow.loading.loading.loading.loading .input > i.icon:after,
391.ui.inverted.yellow.loading.loading.loading.loading > i.icon:after,
392.ui.inverted.yellow.loader.loader.loader:after {
393 color: #FFE21F;
394}
395.ui.olive.elastic.loader.loader:before,
396.ui.olive.basic.elastic.loading.button:before,
397.ui.olive.basic.elastic.loading.button:after,
398.ui.olive.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
399.ui.olive.elastic.loading.loading.loading .input > i.icon:before,
400.ui.olive.elastic.loading.loading.loading.loading > i.icon:before,
401.ui.olive.loading.loading.loading.loading:not(.usual):not(.button):after,
402.ui.olive.loading.loading.loading.loading .input > i.icon:after,
403.ui.olive.loading.loading.loading.loading > i.icon:after,
404.ui.olive.loader.loader.loader:after {
405 color: #B5CC18;
406}
407.ui.inverted.olive.elastic.loader:before,
408.ui.inverted.olive.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
409.ui.inverted.olive.elastic.loading.loading.loading .input > i.icon:before,
410.ui.inverted.olive.elastic.loading.loading.loading > i.icon:before,
411.ui.inverted.olive.loading.loading.loading.loading:not(.usual):after,
412.ui.inverted.olive.loading.loading.loading.loading .input > i.icon:after,
413.ui.inverted.olive.loading.loading.loading.loading > i.icon:after,
414.ui.inverted.olive.loader.loader.loader:after {
415 color: #D9E778;
416}
417.ui.green.elastic.loader.loader:before,
418.ui.green.basic.elastic.loading.button:before,
419.ui.green.basic.elastic.loading.button:after,
420.ui.green.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
421.ui.green.elastic.loading.loading.loading .input > i.icon:before,
422.ui.green.elastic.loading.loading.loading.loading > i.icon:before,
423.ui.green.loading.loading.loading.loading:not(.usual):not(.button):after,
424.ui.green.loading.loading.loading.loading .input > i.icon:after,
425.ui.green.loading.loading.loading.loading > i.icon:after,
426.ui.green.loader.loader.loader:after {
427 color: #21BA45;
428}
429.ui.inverted.green.elastic.loader:before,
430.ui.inverted.green.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
431.ui.inverted.green.elastic.loading.loading.loading .input > i.icon:before,
432.ui.inverted.green.elastic.loading.loading.loading > i.icon:before,
433.ui.inverted.green.loading.loading.loading.loading:not(.usual):after,
434.ui.inverted.green.loading.loading.loading.loading .input > i.icon:after,
435.ui.inverted.green.loading.loading.loading.loading > i.icon:after,
436.ui.inverted.green.loader.loader.loader:after {
437 color: #2ECC40;
438}
439.ui.teal.elastic.loader.loader:before,
440.ui.teal.basic.elastic.loading.button:before,
441.ui.teal.basic.elastic.loading.button:after,
442.ui.teal.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
443.ui.teal.elastic.loading.loading.loading .input > i.icon:before,
444.ui.teal.elastic.loading.loading.loading.loading > i.icon:before,
445.ui.teal.loading.loading.loading.loading:not(.usual):not(.button):after,
446.ui.teal.loading.loading.loading.loading .input > i.icon:after,
447.ui.teal.loading.loading.loading.loading > i.icon:after,
448.ui.teal.loader.loader.loader:after {
449 color: #00B5AD;
450}
451.ui.inverted.teal.elastic.loader:before,
452.ui.inverted.teal.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
453.ui.inverted.teal.elastic.loading.loading.loading .input > i.icon:before,
454.ui.inverted.teal.elastic.loading.loading.loading > i.icon:before,
455.ui.inverted.teal.loading.loading.loading.loading:not(.usual):after,
456.ui.inverted.teal.loading.loading.loading.loading .input > i.icon:after,
457.ui.inverted.teal.loading.loading.loading.loading > i.icon:after,
458.ui.inverted.teal.loader.loader.loader:after {
459 color: #6DFFFF;
460}
461.ui.blue.elastic.loader.loader:before,
462.ui.blue.basic.elastic.loading.button:before,
463.ui.blue.basic.elastic.loading.button:after,
464.ui.blue.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
465.ui.blue.elastic.loading.loading.loading .input > i.icon:before,
466.ui.blue.elastic.loading.loading.loading.loading > i.icon:before,
467.ui.blue.loading.loading.loading.loading:not(.usual):not(.button):after,
468.ui.blue.loading.loading.loading.loading .input > i.icon:after,
469.ui.blue.loading.loading.loading.loading > i.icon:after,
470.ui.blue.loader.loader.loader:after {
471 color: #2185D0;
472}
473.ui.inverted.blue.elastic.loader:before,
474.ui.inverted.blue.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
475.ui.inverted.blue.elastic.loading.loading.loading .input > i.icon:before,
476.ui.inverted.blue.elastic.loading.loading.loading > i.icon:before,
477.ui.inverted.blue.loading.loading.loading.loading:not(.usual):after,
478.ui.inverted.blue.loading.loading.loading.loading .input > i.icon:after,
479.ui.inverted.blue.loading.loading.loading.loading > i.icon:after,
480.ui.inverted.blue.loader.loader.loader:after {
481 color: #54C8FF;
482}
483.ui.violet.elastic.loader.loader:before,
484.ui.violet.basic.elastic.loading.button:before,
485.ui.violet.basic.elastic.loading.button:after,
486.ui.violet.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
487.ui.violet.elastic.loading.loading.loading .input > i.icon:before,
488.ui.violet.elastic.loading.loading.loading.loading > i.icon:before,
489.ui.violet.loading.loading.loading.loading:not(.usual):not(.button):after,
490.ui.violet.loading.loading.loading.loading .input > i.icon:after,
491.ui.violet.loading.loading.loading.loading > i.icon:after,
492.ui.violet.loader.loader.loader:after {
493 color: #6435C9;
494}
495.ui.inverted.violet.elastic.loader:before,
496.ui.inverted.violet.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
497.ui.inverted.violet.elastic.loading.loading.loading .input > i.icon:before,
498.ui.inverted.violet.elastic.loading.loading.loading > i.icon:before,
499.ui.inverted.violet.loading.loading.loading.loading:not(.usual):after,
500.ui.inverted.violet.loading.loading.loading.loading .input > i.icon:after,
501.ui.inverted.violet.loading.loading.loading.loading > i.icon:after,
502.ui.inverted.violet.loader.loader.loader:after {
503 color: #A291FB;
504}
505.ui.purple.elastic.loader.loader:before,
506.ui.purple.basic.elastic.loading.button:before,
507.ui.purple.basic.elastic.loading.button:after,
508.ui.purple.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
509.ui.purple.elastic.loading.loading.loading .input > i.icon:before,
510.ui.purple.elastic.loading.loading.loading.loading > i.icon:before,
511.ui.purple.loading.loading.loading.loading:not(.usual):not(.button):after,
512.ui.purple.loading.loading.loading.loading .input > i.icon:after,
513.ui.purple.loading.loading.loading.loading > i.icon:after,
514.ui.purple.loader.loader.loader:after {
515 color: #A333C8;
516}
517.ui.inverted.purple.elastic.loader:before,
518.ui.inverted.purple.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
519.ui.inverted.purple.elastic.loading.loading.loading .input > i.icon:before,
520.ui.inverted.purple.elastic.loading.loading.loading > i.icon:before,
521.ui.inverted.purple.loading.loading.loading.loading:not(.usual):after,
522.ui.inverted.purple.loading.loading.loading.loading .input > i.icon:after,
523.ui.inverted.purple.loading.loading.loading.loading > i.icon:after,
524.ui.inverted.purple.loader.loader.loader:after {
525 color: #DC73FF;
526}
527.ui.pink.elastic.loader.loader:before,
528.ui.pink.basic.elastic.loading.button:before,
529.ui.pink.basic.elastic.loading.button:after,
530.ui.pink.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
531.ui.pink.elastic.loading.loading.loading .input > i.icon:before,
532.ui.pink.elastic.loading.loading.loading.loading > i.icon:before,
533.ui.pink.loading.loading.loading.loading:not(.usual):not(.button):after,
534.ui.pink.loading.loading.loading.loading .input > i.icon:after,
535.ui.pink.loading.loading.loading.loading > i.icon:after,
536.ui.pink.loader.loader.loader:after {
537 color: #E03997;
538}
539.ui.inverted.pink.elastic.loader:before,
540.ui.inverted.pink.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
541.ui.inverted.pink.elastic.loading.loading.loading .input > i.icon:before,
542.ui.inverted.pink.elastic.loading.loading.loading > i.icon:before,
543.ui.inverted.pink.loading.loading.loading.loading:not(.usual):after,
544.ui.inverted.pink.loading.loading.loading.loading .input > i.icon:after,
545.ui.inverted.pink.loading.loading.loading.loading > i.icon:after,
546.ui.inverted.pink.loader.loader.loader:after {
547 color: #FF8EDF;
548}
549.ui.brown.elastic.loader.loader:before,
550.ui.brown.basic.elastic.loading.button:before,
551.ui.brown.basic.elastic.loading.button:after,
552.ui.brown.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
553.ui.brown.elastic.loading.loading.loading .input > i.icon:before,
554.ui.brown.elastic.loading.loading.loading.loading > i.icon:before,
555.ui.brown.loading.loading.loading.loading:not(.usual):not(.button):after,
556.ui.brown.loading.loading.loading.loading .input > i.icon:after,
557.ui.brown.loading.loading.loading.loading > i.icon:after,
558.ui.brown.loader.loader.loader:after {
559 color: #A5673F;
560}
561.ui.inverted.brown.elastic.loader:before,
562.ui.inverted.brown.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
563.ui.inverted.brown.elastic.loading.loading.loading .input > i.icon:before,
564.ui.inverted.brown.elastic.loading.loading.loading > i.icon:before,
565.ui.inverted.brown.loading.loading.loading.loading:not(.usual):after,
566.ui.inverted.brown.loading.loading.loading.loading .input > i.icon:after,
567.ui.inverted.brown.loading.loading.loading.loading > i.icon:after,
568.ui.inverted.brown.loader.loader.loader:after {
569 color: #D67C1C;
570}
571.ui.grey.elastic.loader.loader:before,
572.ui.grey.basic.elastic.loading.button:before,
573.ui.grey.basic.elastic.loading.button:after,
574.ui.grey.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
575.ui.grey.elastic.loading.loading.loading .input > i.icon:before,
576.ui.grey.elastic.loading.loading.loading.loading > i.icon:before,
577.ui.grey.loading.loading.loading.loading:not(.usual):not(.button):after,
578.ui.grey.loading.loading.loading.loading .input > i.icon:after,
579.ui.grey.loading.loading.loading.loading > i.icon:after,
580.ui.grey.loader.loader.loader:after {
581 color: #767676;
582}
583.ui.inverted.grey.elastic.loader:before,
584.ui.inverted.grey.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
585.ui.inverted.grey.elastic.loading.loading.loading .input > i.icon:before,
586.ui.inverted.grey.elastic.loading.loading.loading > i.icon:before,
587.ui.inverted.grey.loading.loading.loading.loading:not(.usual):after,
588.ui.inverted.grey.loading.loading.loading.loading .input > i.icon:after,
589.ui.inverted.grey.loading.loading.loading.loading > i.icon:after,
590.ui.inverted.grey.loader.loader.loader:after {
591 color: #DCDDDE;
592}
593.ui.black.elastic.loader.loader:before,
594.ui.black.basic.elastic.loading.button:before,
595.ui.black.basic.elastic.loading.button:after,
596.ui.black.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
597.ui.black.elastic.loading.loading.loading .input > i.icon:before,
598.ui.black.elastic.loading.loading.loading.loading > i.icon:before,
599.ui.black.loading.loading.loading.loading:not(.usual):not(.button):after,
600.ui.black.loading.loading.loading.loading .input > i.icon:after,
601.ui.black.loading.loading.loading.loading > i.icon:after,
602.ui.black.loader.loader.loader:after {
603 color: #1B1C1D;
604}
605.ui.inverted.black.elastic.loader:before,
606.ui.inverted.black.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
607.ui.inverted.black.elastic.loading.loading.loading .input > i.icon:before,
608.ui.inverted.black.elastic.loading.loading.loading > i.icon:before,
609.ui.inverted.black.loading.loading.loading.loading:not(.usual):after,
610.ui.inverted.black.loading.loading.loading.loading .input > i.icon:after,
611.ui.inverted.black.loading.loading.loading.loading > i.icon:after,
612.ui.inverted.black.loader.loader.loader:after {
613 color: #545454;
614}
615.ui.elastic.loader.loader:before,
616.ui.elastic.loading.loading.loading:before,
617.ui.elastic.loading.loading.loading .input > i.icon:before,
618.ui.elastic.loading.loading.loading > i.icon:before,
619.ui.loading.loading.loading.loading:not(.usual):after,
620.ui.loading.loading.loading.loading .input > i.icon:after,
621.ui.loading.loading.loading.loading > i.icon:after,
622.ui.loader.loader.loader:after {
623 border-color: currentColor;
624}
625.ui.elastic.loading.loading.loading.loading.button:not(.inverted):not(.basic):before {
626 color: #FFFFFF;
627}
628.ui.elastic.basic.loading.button:before,
629.ui.elastic.basic.loading.button:after {
630 color: #767676;
631}
632.ui.double.loading.loading.loading.loading.button:after {
633 border-bottom-color: currentColor;
634}
635
636/*-------------------
637 Inline
638 --------------------*/
639
640.ui.inline.loader {
641 position: relative;
642 vertical-align: middle;
643 margin: 0;
644 left: 0;
645 top: 0;
646 -webkit-transform: none;
647 transform: none;
648}
649.ui.inline.loader.active,
650.ui.inline.loader.visible {
651 display: inline-block;
652}
653
654/* Centered Inline */
655.ui.centered.inline.loader.active,
656.ui.centered.inline.loader.visible {
657 display: block;
658 margin-left: auto;
659 margin-right: auto;
660}
661.ui.loading.loading.loading.loading.loading.loading:after,
662.ui.loading.loading.loading.loading.loading.loading .input > i.icon:after,
663.ui.loading.loading.loading.loading.loading.loading > i.icon:after,
664.ui.loader.loader.loader.loader.loader:after {
665 border-left-color: transparent;
666 border-right-color: transparent;
667}
668.ui.loading.loading.loading.loading.loading.loading.loading:not(.double):after,
669.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) .input > i.icon:after,
670.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) > i.icon:after,
671.ui.loader.loader.loader.loader.loader.loader:not(.double):after {
672 border-bottom-color: transparent;
673}
674.ui.loading.loading.loading.loading.loading.loading.card:after,
675.ui.loading.loading.loading.loading.loading.loading.segments:after,
676.ui.loading.loading.loading.loading.loading.loading.segment:after,
677.ui.loading.loading.loading.loading.loading.loading.form:after {
678 border-left-color: rgba(0, 0, 0, 0.1);
679 border-right-color: rgba(0, 0, 0, 0.1);
680}
681.ui.loading.loading.loading.loading.loading.loading.card:not(.double):after,
682.ui.loading.loading.loading.loading.loading.loading.segments:not(.double):after,
683.ui.loading.loading.loading.loading.loading.loading.segment:not(.double):after,
684.ui.loading.loading.loading.loading.loading.loading.form:not(.double):after {
685 border-bottom-color: rgba(0, 0, 0, 0.1);
686}
687
688/*-------------------
689 Elastic
690 --------------------*/
691
692.ui.dimmer > .ui.elastic.loader {
693 color: #FFFFFF;
694}
695.ui.inverted.dimmer > .ui.elastic.loader {
696 color: #767676;
697}
698.ui.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card):after,
699.ui.elastic.loading.loading .input > i.icon:after,
700.ui.elastic.loading.loading > i.icon:after,
701.ui.elastic.loader.loader:after {
702 -webkit-animation: loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
703 animation: loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
704 -webkit-animation-delay: 0.3s;
705 animation-delay: 0.3s;
706}
707.ui.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card):before,
708.ui.elastic.loading.loading.loading .input > i.icon:before,
709.ui.elastic.loading.loading.loading > i.icon:before,
710.ui.elastic.loader.loader:before {
711 -webkit-animation: elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
712 animation: elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
713 -moz-animation: currentcolor-elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
714 border-right-color: transparent;
715}
716.ui.elastic.inline.loader:empty {
717 -webkit-animation: loader 8s infinite linear;
718 animation: loader 8s infinite linear;
719}
720.ui.slow.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card):after,
721.ui.slow.elastic.loading.loading .input > i.icon:after,
722.ui.slow.elastic.loading.loading > i.icon:after,
723.ui.slow.elastic.loader.loader:after {
724 -webkit-animation-duration: 1.5s;
725 animation-duration: 1.5s;
726 -webkit-animation-delay: 0.45s;
727 animation-delay: 0.45s;
728}
729.ui.slow.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card):before,
730.ui.slow.elastic.loading.loading.loading .input > i.icon:before,
731.ui.slow.elastic.loading.loading.loading > i.icon:before,
732.ui.slow.elastic.loader.loader:before {
733 -webkit-animation-duration: 1.5s;
734 animation-duration: 1.5s;
735}
736.ui.fast.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card):after,
737.ui.fast.elastic.loading.loading .input > i.icon:after,
738.ui.fast.elastic.loading.loading > i.icon:after,
739.ui.fast.elastic.loader.loader:after {
740 -webkit-animation-duration: 0.66s;
741 animation-duration: 0.66s;
742 -webkit-animation-delay: 0.2s;
743 animation-delay: 0.2s;
744}
745.ui.fast.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card):before,
746.ui.fast.elastic.loading.loading.loading .input > i.icon:before,
747.ui.fast.elastic.loading.loading.loading > i.icon:before,
748.ui.fast.elastic.loader.loader:before {
749 -webkit-animation-duration: 0.66s;
750 animation-duration: 0.66s;
751}
752@-webkit-keyframes elastic-loader {
753 0%,
754 1% {
755 border-left-color: transparent;
756 border-bottom-color: transparent;
757 }
758 1.1%,
759 50% {
760 border-left-color: inherit;
761 }
762 10%,
763 35.1% {
764 border-bottom-color: transparent;
765 }
766 10.1%,
767 35% {
768 border-bottom-color: inherit;
769 }
770 50.1% {
771 border-left-color: transparent;
772 }
773 100% {
774 border-left-color: transparent;
775 border-bottom-color: transparent;
776 -webkit-transform: rotate(360deg);
777 transform: rotate(360deg);
778 }
779}
780@keyframes elastic-loader {
781 0%,
782 1% {
783 border-left-color: transparent;
784 border-bottom-color: transparent;
785 }
786 1.1%,
787 50% {
788 border-left-color: inherit;
789 }
790 10%,
791 35.1% {
792 border-bottom-color: transparent;
793 }
794 10.1%,
795 35% {
796 border-bottom-color: inherit;
797 }
798 50.1% {
799 border-left-color: transparent;
800 }
801 100% {
802 border-left-color: transparent;
803 border-bottom-color: transparent;
804 -webkit-transform: rotate(360deg);
805 transform: rotate(360deg);
806 }
807}
808@-webkit-keyframes currentcolor-elastic-loader {
809 0%,
810 1% {
811 border-left-color: transparent;
812 border-bottom-color: transparent;
813 }
814 1.1%,
815 50% {
816 border-left-color: currentColor;
817 }
818 10%,
819 35.1% {
820 border-bottom-color: transparent;
821 }
822 10.1%,
823 35% {
824 border-bottom-color: currentColor;
825 }
826 50.1% {
827 border-left-color: transparent;
828 }
829 100% {
830 border-left-color: transparent;
831 border-bottom-color: transparent;
832 -webkit-transform: rotate(360deg);
833 transform: rotate(360deg);
834 }
835}
836@keyframes currentcolor-elastic-loader {
837 0%,
838 1% {
839 border-left-color: transparent;
840 border-bottom-color: transparent;
841 }
842 1.1%,
843 50% {
844 border-left-color: currentColor;
845 }
846 10%,
847 35.1% {
848 border-bottom-color: transparent;
849 }
850 10.1%,
851 35% {
852 border-bottom-color: currentColor;
853 }
854 50.1% {
855 border-left-color: transparent;
856 }
857 100% {
858 border-left-color: transparent;
859 border-bottom-color: transparent;
860 -webkit-transform: rotate(360deg);
861 transform: rotate(360deg);
862 }
863}
864
865
866/*******************************
867 Theme Overrides
868*******************************/
869
870
871
872/*******************************
873 Site Overrides
874*******************************/
875