git ssb

10+

Matt McKegg / patchwork



Tree: 7a2806f51cfcc2a146b0f508dbfde798a1fa11c3

Files: 7a2806f51cfcc2a146b0f508dbfde798a1fa11c3 / styles / light / loading.mcss

1401 bytesRaw
1Loading {
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: 'Searching...'
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