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