Loader by MrLegendGaming

1:root {
2  --i: 0;
3}
4
5.loading-screen[move="1"] {
6  animation: disappear 2s ease-in-out forwards;
7}
8.loading-screen[move="2"] {
9  animation: reappear 2s ease-in-out forwards;
10}
11
12@keyframes disappear {
13  0% {
14    opacity: 100%;
15    transform: translateY(0%);
16  }
17  50% {
18    background-color: transparent;
19    opacity: 0%;
20  }
21  100% {
22    transform: translateY(100%);
23  }
24}
25
26@keyframes reappear {
27  0% {
28    opacity: 0%;
29    transform: translateY(100%);
30    background-color: transparent;
31  }
32  50% {
33    opacity: 100%;
34  }
35  100% {
36    background-color: #d8e0d8;
37    transform: translateY(0%);
38  }
39}
40
41.solid {
42  position: relative;
43  width: 100px;
44  height: 100px;
45  animation: spin 16s infinite linear;
46  transform-style: preserve-3d;
47}
48.solid .side {
49  position: absolute;
50  left: 0;
51  bottom: 50%;
52  border-bottom: 86.6px solid black;
53  border-left: 50px solid transparent;
54  border-right: 50px solid transparent;
55  transform-origin: 50% 0%;
56}
57.solid .side:nth-child(1) {
58  transform: translateY(-9.25px) rotateY(72deg) rotateX(52.62deg);
59  border-bottom-color: rgba(134, 7, 147, 0.4);
60}
61.solid .side:nth-child(2) {
62  transform: translateY(-9.25px) rotateY(144deg) rotateX(52.62deg);
63  border-bottom-color: rgba(42, 160, 39, 0.4);
64}
65.solid .side:nth-child(3) {
66  transform: translateY(-9.25px) rotateY(216deg) rotateX(52.62deg);
67  border-bottom-color: rgba(209, 83, 84, 0.4);
68}
69.solid .side:nth-child(4) {
70  transform: translateY(-9.25px) rotateY(288deg) rotateX(52.62deg);
71  border-bottom-color: rgba(244, 202, 236, 0.4);
72}
73.solid .side:nth-child(5) {
74  transform: translateY(-9.25px) rotateY(360deg) rotateX(52.62deg);
75  border-bottom-color: rgba(73, 232, 200, 0.4);
76}
77.solid .side:nth-child(6) {
78  transform: translateY(180.9px) rotateY(468deg) rotateX(127.38deg);
79  border-bottom-color: rgba(105, 77, 3, 0.4);
80}
81.solid .side:nth-child(7) {
82  transform: translateY(180.9px) rotateY(540deg) rotateX(127.38deg);
83  border-bottom-color: rgba(255, 45, 71, 0.4);
84}
85.solid .side:nth-child(8) {
86  transform: translateY(180.9px) rotateY(612deg) rotateX(127.38deg);
87  border-bottom-color: rgba(177, 172, 3, 0.4);
88}
89.solid .side:nth-child(9) {
90  transform: translateY(180.9px) rotateY(684deg) rotateX(127.38deg);
91  border-bottom-color: rgba(175, 200, 228, 0.4);
92}
93.solid .side:nth-child(10) {
94  transform: translateY(180.9px) rotateY(756deg) rotateX(127.38deg);
95  border-bottom-color: rgba(187, 195, 141, 0.4);
96}
97.solid .side:nth-child(11) {
98  transform: translateY(43.3px) rotateY(828deg) translateZ(85.05px)
99    rotateX(-10.81deg);
100  border-bottom-color: rgba(212, 249, 1, 0.4);
101}
102.solid .side:nth-child(12) {
103  transform: translateY(43.3px) rotateY(900deg) translateZ(85.05px)
104    rotateX(-10.81deg);
105  border-bottom-color: rgba(85, 161, 43, 0.4);
106}
107.solid .side:nth-child(13) {
108  transform: translateY(43.3px) rotateY(972deg) translateZ(85.05px)
109    rotateX(-10.81deg);
110  border-bottom-color: rgba(15, 209, 47, 0.4);
111}
112.solid .side:nth-child(14) {
113  transform: translateY(43.3px) rotateY(1044deg) translateZ(85.05px)
114    rotateX(-10.81deg);
115  border-bottom-color: rgba(131, 69, 22, 0.4);
116}
117.solid .side:nth-child(15) {
118  transform: translateY(43.3px) rotateY(1116deg) translateZ(85.05px)
119    rotateX(-10.81deg);
120  border-bottom-color: rgba(43, 13, 170, 0.4);
121}
122.solid .side:nth-child(16) {
123  transform: translateY(128.35px) rotateY(1152deg) rotateZ(180deg)
124    translateZ(85.05px) rotateX(-10.81deg);
125  border-bottom-color: rgba(68, 85, 95, 0.4);
126}
127.solid .side:nth-child(17) {
128  transform: translateY(128.35px) rotateY(1224deg) rotateZ(180deg)
129    translateZ(85.05px) rotateX(-10.81deg);
130  border-bottom-color: rgba(159, 76, 176, 0.4);
131}
132.solid .side:nth-child(18) {
133  transform: translateY(128.35px) rotateY(1296deg) rotateZ(180deg)
134    translateZ(85.05px) rotateX(-10.81deg);
135  border-bottom-color: rgba(54, 95, 172, 0.4);
136}
137.solid .side:nth-child(19) {
138  transform: translateY(128.35px) rotateY(1368deg) rotateZ(180deg)
139    translateZ(85.05px) rotateX(-10.81deg);
140  border-bottom-color: rgba(162, 92, 204, 0.4);
141}
142.solid .side:nth-child(20) {
143  transform: translateY(128.35px) rotateY(1440deg) rotateZ(180deg)
144    translateZ(85.05px) rotateX(-10.81deg);
145  border-bottom-color: rgba(218, 1, 139, 0.4);
146}
147
148@keyframes spin {
149  0% {
150    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
151  }
152  100% {
153    transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
154  }
155}
156