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
  -search {
40
    height: 200px
41
42
    ::before {
43
      height: 100px
44
      width: 100px
45
    }
46
    ::after {
47
      color: #CCC;
48
      content: 'Seaching...'
49
      font-size: 200%
50
    }
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
65
@svg waitingIcon {
66
  width: 30px
67
  height: 30px
68
  content: "<circle cx='15' cy='15' r='10' /><circle cx='10' cy='10' r='2' /><circle cx='20' cy='20' r='3' />"
69
70
  circle {
71
    stroke: #CCC
72
    stroke-width: 3px
73
    fill: none
74
  }
75
}
76
77
@keyframes spin {
78
  0% {
79
    transform: rotate(0deg);
80
  }
81
  100% {
82
    transform: rotate(360deg);
83
  }
84
}
85