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