git ssb

1
Loading {
2
  height: 25%
3
  display: flex
4
  align-items: center
5
  justify-content: center
6
  whitespace: no-wrap
7
  span.info {
8
    overflow: hidden
9
    white-space: nowrap
10
    text-overflow: ellipsis
11
  }
12
  -inline {
13
    height: 16px
14
    width: 16px
15
    display: inline-block
16
    margin: -3px 3px
17
    ::before {
18
      display: block
19
      height: 16px
20
      width: 16px
21
    }
22
  }
23
  -small {
24
    ::before {
25
      height: 30px
26
      width: 30px
27
    }
28
  }
29
  -large {
30
    height: 25vh
31
    ::before {
32
      height: 100px
33
      width: 100px
34
    }
35
    ::after {
36
      color: #ccc
37
      content: 'Loading...'
38
      font-size: 200%
39
    }
40
  }
41
  -search {
42
    height: 200px
43
    ::before {
44
      height: 100px
45
      width: 100px
46
    }
47
    ::after {
48
      color: #ccc
49
      content: 'Searching...'
50
      font-size: 200%
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
@svg waitingIcon {
65
  width: 30px
66
  height: 30px
67
  content: "<circle cx='15' cy='15' r='10' /><circle cx='10' cy='10' r='2' /><circle cx='20' cy='20' r='3' />"
68
  circle {
69
    stroke: #ccc
70
    stroke-width: 3px
71
    fill: none
72
  }
73
}
74
@keyframes spin {
75
  0% {
76
    transform: rotate(0deg)
77
  }
78
  100% {
79
    transform: rotate(360deg)
80
  }
81
}
82