1#container {
2  width: 100px;
3  height: 125px;
4  margin: auto auto;
5}
6
7.loading-title {
8  display: block;
9  text-align: center;
10  font-size: 20;
11  font-family: 'Inter', sans-serif;
12  font-weight: bold;
13  padding-bottom: 15px;
14  color: #888;
15}
16
17.loading-circle {
18  display: block;
19  border-left: 5px solid;
20  border-top-left-radius: 100%;
21  border-top: 5px solid;
22  margin: 5px;
23  animation-name: Loader_611;
24  animation-duration: 1500ms;
25  animation-timing-function: linear;
26  animation-delay: 0s;
27  animation-iteration-count: infinite;
28  animation-direction: normal;
29  animation-fill-mode: forwards;
30}
31
32.sp1 {
33  border-left-color: #F44336;
34  border-top-color: #F44336;
35  width: 40px;
36  height: 40px;
37}
38
39.sp2 {
40  border-left-color: #FFC107;
41  border-top-color: #FFC107;
42  width: 30px;
43  height: 30px;
44}
45
46.sp3 {
47  width: 20px;
48  height: 20px;
49  border-left-color: #8bc34a;
50  border-top-color: #8bc34a;
51}
52
53@keyframes Loader_611 {
54  0% {
55    transform: rotate(0deg);
56    transform-origin: right bottom;
57  }
58
59  25% {
60    transform: rotate(90deg);
61    transform-origin: right bottom;
62  }
63
64  50% {
65    transform: rotate(180deg);
66    transform-origin: right bottom;
67  }
68
69  75% {
70    transform: rotate(270deg);
71    transform-origin: right bottom;
72  }
73
74  100% {
75    transform: rotate(360deg);
76    transform-origin: right bottom;
77  }
78}