Loader by mRcOol7

1.pyramid-loader {
2  position: relative;
3  width: 300px;
4  height: 300px;
5  display: block;
6  transform-style: preserve-3d;
7  transform: rotateX(-20deg);
8}
9
10.wrapper {
11  position: relative;
12  width: 100%;
13  height: 100%;
14  transform-style: preserve-3d;
15  animation: spin 6s linear infinite;
16}
17
18@keyframes spin {
19  100% {
20    transform: rotateY(360deg);
21  }
22}
23
24.pyramid-loader .wrapper .side {
25  width: 70px;
26  height: 70px;
27  position: absolute;
28  top: 0;
29  left: 0;
30  right: 0;
31  bottom: 0;
32  margin: auto;
33  transform-origin: center top;
34  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
35  box-shadow: 0 0 10px rgba(255, 99, 71, 0.5);
36}
37
38.pyramid-loader .wrapper .side1 {
39  transform: rotateZ(-30deg) rotateY(90deg);
40  background: conic-gradient(#ff6d70, #ff6d70, #ffe600, #ffe600);
41}
42
43.pyramid-loader .wrapper .side2 {
44  transform: rotateZ(30deg) rotateY(90deg);
45  background: conic-gradient(#ffe600, #ffe600, #6cffd6, #6cffd6);
46}
47
48.pyramid-loader .wrapper .side3 {
49  transform: rotateX(30deg);
50  background: conic-gradient(#6cffd6, #6cffd6, #ff6d70, #ff6d70);
51}
52
53.pyramid-loader .wrapper .side4 {
54  transform: rotateX(-30deg);
55  background: conic-gradient(#ff6d70, #ff6d70, #ffe600, #ffe600);
56}
57
58.pyramid-loader .wrapper .shadow {
59  width: 60px;
60  height: 60px;
61  background: linear-gradient(rgba(255, 99, 71, 0.8), rgba(255, 99, 71, 0.4));
62  position: absolute;
63  top: 0;
64  left: 0;
65  right: 0;
66  bottom: 0;
67  margin: auto;
68  transform: rotateX(90deg) translateZ(-40px);
69  filter: blur(8px);
70  border-radius: 50%;
71  box-shadow: 0 0 20px rgba(255, 99, 71, 0.8);
72}
73