git ssb

1
Loading {
2
  height: 25%
3
  display: flex
4
  align-items: center
5
  justify-content: center
6
7
  -inline {
8
    height: 16px
9
    width: 16px
10
    display: inline-block
11
    margin: -3px 3px
12
13
    ::before {
14
      display: block
15
      height: 16px
16
      width: 16px
17
    }
18
  }
19
20
  -large {
21
    ::before {
22
      height: 100px
23
      width: 100px
24
    }
25
    ::after {
26
      color: #CCC;
27
      content: 'Loading...'
28
      font-size: 200%
29
    }
30
  }
31
32
  ::before {
33
    content: ' '
34
    height: 50px
35
    width: 50px
36
    background-image: svg(waitingIcon)
37
    background-repeat: no-repeat
38
    background-position: center
39
    background-size: contain
40
    animation: spin 3s infinite linear
41
  }
42
}
43
44
@svg waitingIcon {
45
  width: 30px
46
  height: 30px
47
  content: "<circle cx='15' cy='15' r='10' /><circle cx='10' cy='10' r='2' /><circle cx='20' cy='20' r='3' />"
48
49
  circle {
50
    stroke: #CCC
51
    stroke-width: 3px
52
    fill: none
53
  }
54
}
55
56
@keyframes spin {
57
  0% {
58
    transform: rotate(0deg);
59
  }
60
  100% {
61
    transform: rotate(360deg);
62
  }
63
}
64