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 4s 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/* you can choose any gradient or color you want */
28  /* background: radial-gradient( #2F2585 10%, #F028FD 70%, #2BDEAC 120%); */
29  position: absolute;
30  top: 0;
31  left: 0;
32  right: 0;
33  bottom: 0;
34  margin: auto;
35  transform-origin: center top;
36  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
37}
38
39.pyramid-loader .wrapper .side1 {
40  transform: rotateZ(-30deg) rotateY(90deg);
41  background: conic-gradient( #2BDEAC, #F028FD, #D8CCE6, #2F2585);
42}
43
44.pyramid-loader .wrapper .side2 {
45  transform: rotateZ(30deg) rotateY(90deg);
46  background: conic-gradient( #2F2585, #D8CCE6, #F028FD, #2BDEAC);
47}
48
49.pyramid-loader .wrapper .side3 {
50  transform: rotateX(30deg);
51  background: conic-gradient( #2F2585, #D8CCE6, #F028FD, #2BDEAC);
52}
53
54.pyramid-loader .wrapper .side4 {
55  transform: rotateX(-30deg);
56  background: conic-gradient( #2BDEAC, #F028FD, #D8CCE6, #2F2585);
57}
58
59.pyramid-loader .wrapper .shadow {
60  width: 60px;
61  height: 60px;
62  background: #8B5AD5;
63  position: absolute;
64  top: 0;
65  left: 0;
66  right: 0;
67  bottom: 0;
68  margin: auto;
69  transform: rotateX(90deg) translateZ(-40px);
70  filter: blur(12px);
71}