git ssb

1
Loading {
2
  height: 25%
3
  display: flex
4
  align-items: center
5
  justify-content: center
6
  whitespace: no-wrap
7
8
  span.info {
9
    overflow: hidden
10
    white-space: nowrap
11
    text-overflow: ellipsis
12
  }
13
14
  -inline {
15
    height: 16px
16
    width: 16px
17
    display: inline-block
18
    margin: -3px 3px
19
20
    ::before {
21
      display: block
22
      height: 16px
23
      width: 16px
24
    }
25
  }
26
27
  -small {
28
    ::before {
29
      height: 30px
30
      width: 30px
31
    }
32
  }
33
34
  -large {
35
    height: 25vh
36
    ::before {
37
      height: 100px
38
      width: 100px
39
    }
40
    ::after {
41
      color: #CCC;
42
      content: 'Loading...'
43
      font-size: 200%
44
    }
45
  }
46
47
  -search {
48
    height: 200px
49
50
    ::before {
51
      height: 100px
52
      width: 100px
53
    }
54
    ::after {
55
      color: #CCC;
56
      content: 'Seaching...'
57
      font-size: 200%
58
    }
59
  }
60
61
  ::before {
62
    content: ' '
63
    height: 50px
64
    width: 50px
65
    background-image: svg(waitingIcon)
66
    background-repeat: no-repeat
67
    background-position: center
68
    background-size: contain
69
    animation: spin 3s infinite linear
70
  }
71
}
72
73
@svg waitingIcon {
74
  width: 30px
75
  height: 30px
76
  content: "<circle cx='15' cy='15' r='10' /><circle cx='10' cy='10' r='2' /><circle cx='20' cy='20' r='3' />"
77
78
  circle {
79
    stroke: #CCC
80
    stroke-width: 3px
81
    fill: none
82
  }
83
}
84
85
@keyframes spin {
86
  0% {
87
    transform: rotate(0deg);
88
  }
89
  100% {
90
    transform: rotate(360deg);
91
  }
92
}
93