Files: 1b12a6e637ed46e490143b6969204eed33886975 / styles / light / loading.mcss
1400 bytesRaw
1 | Loading { |
2 | height: 25% |
3 | display: flex |
4 | align-items: center |
5 | justify-content: center |
6 | whitespace: no-wrap |
7 | |
8 | span.info { |
9 | overflow: hidden |
10 | white-space: nowrap |
11 | text-overflow: ellipsis |
12 | } |
13 | |
14 | -inline { |
15 | height: 16px |
16 | width: 16px |
17 | display: inline-block |
18 | margin: -3px 3px |
19 | |
20 | ::before { |
21 | display: block |
22 | height: 16px |
23 | width: 16px |
24 | } |
25 | } |
26 | |
27 | -small { |
28 | ::before { |
29 | height: 30px |
30 | width: 30px |
31 | } |
32 | } |
33 | |
34 | -large { |
35 | height: 25vh |
36 | ::before { |
37 | height: 100px |
38 | width: 100px |
39 | } |
40 | ::after { |
41 | color: #CCC; |
42 | content: 'Loading...' |
43 | font-size: 200% |
44 | } |
45 | } |
46 | |
47 | -search { |
48 | height: 200px |
49 | |
50 | ::before { |
51 | height: 100px |
52 | width: 100px |
53 | } |
54 | ::after { |
55 | color: #CCC; |
56 | content: 'Seaching...' |
57 | font-size: 200% |
58 | } |
59 | } |
60 | |
61 | ::before { |
62 | content: ' ' |
63 | height: 50px |
64 | width: 50px |
65 | background-image: svg(waitingIcon) |
66 | background-repeat: no-repeat |
67 | background-position: center |
68 | background-size: contain |
69 | animation: spin 3s infinite linear |
70 | } |
71 | } |
72 | |
73 | @svg waitingIcon { |
74 | width: 30px |
75 | height: 30px |
76 | content: "<circle cx='15' cy='15' r='10' /><circle cx='10' cy='10' r='2' /><circle cx='20' cy='20' r='3' />" |
77 | |
78 | circle { |
79 | stroke: #CCC |
80 | stroke-width: 3px |
81 | fill: none |
82 | } |
83 | } |
84 | |
85 | @keyframes spin { |
86 | 0% { |
87 | transform: rotate(0deg); |
88 | } |
89 | 100% { |
90 | transform: rotate(360deg); |
91 | } |
92 | } |
93 |
Built with git-ssb-web