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
  -small {
21
    ::before {
22
      height: 30px
23
      width: 30px
24
    }
25
  }
26
27
  -large {
28
    ::before {
29
      height: 100px
30
      width: 100px
31
    }
32
    ::after {
33
      color: #CCC;
34
      content: 'Loading...'
35
      font-size: 200%
36
    }
37
  }
38
39
  ::before {
40
    content: ' '
41
    height: 50px
42
    width: 50px
43
    background-image: svg(waitingIcon)
44
    background-repeat: no-repeat
45
    background-position: center
46
    background-size: contain
47
    animation: spin 3s infinite linear
48
  }
49
}
50
51
@svg waitingIcon {
52
  width: 30px
53
  height: 30px
54
  content: "<circle cx='15' cy='15' r='10' /><circle cx='10' cy='10' r='2' /><circle cx='20' cy='20' r='3' />"
55
56
  circle {
57
    stroke: #CCC
58
    stroke-width: 3px
59
    fill: none
60
  }
61
}
62
63
@keyframes spin {
64
  0% {
65
    transform: rotate(0deg);
66
  }
67
  100% {
68
    transform: rotate(360deg);
69
  }
70
}
71