Loader by TheAbieza

1.container {
2  width: 175px;
3  height: 175px;
4  background-color: #ABC4AA;
5  border-radius: 10px;
6  position: relative;
7  box-shadow: 5px 5px 0 0 #675D50;
8}
9
10.plate {
11  width: fit-content;
12}
13
14.plate .black,
15.plate .white,
16.plate .center,
17.plate .border {
18  border-radius: 100%;
19}
20
21.container,
22.plate .black,
23.plate .white,
24.plate .border {
25  display: flex;
26  align-items: center;
27  justify-content: center;
28}
29
30.plate .black {
31  width: 150px;
32  height: 150px;
33  background-color: #675D50;
34  animation: rotation 2s infinite linear;
35}
36
37@keyframes rotation {
38  from {
39    transform: rotate(0deg);
40  }
41
42  to {
43    transform: rotate(359deg);
44  }
45}
46
47.plate .white {
48  width: 70px;
49  height: 70px;
50  background-color: #F3DEBA;
51}
52
53.plate .center {
54  width: 20px;
55  height: 20px;
56  background-color: #675D50;
57}
58
59.plate .border {
60  width: 111px;
61  height: 111px;
62  border-top: 3px solid #F3DEBA;
63  border-bottom: 3px solid #F3DEBA;
64  border-left: 3px solid #675D50;
65  border-right: 3px solid #675D50;
66}
67
68.player {
69  display: flex;
70  align-items: center;
71  justify-content: center;
72  flex-direction: column;
73  width: fit-content;
74  position: absolute;
75  bottom: 0;
76  right: 0;
77  margin-bottom: 8px;
78  margin-right: 8px;
79  rotate: -45deg;
80}
81
82.player .circ {
83  width: 25px;
84  height: 25px;
85  background-color: #F3DEBA;
86  border-radius: 100%;
87  z-index: 1;
88}
89
90.player .rect {
91  width: 10px;
92  height: 55px;
93  background-color: #F3DEBA;
94  position: absolute;
95  bottom: 0;
96  margin-bottom: 5px;
97}
98