Loader by alexmaracinaru

1.pyramid-loader {
2  position: relative;
3  width: 300px;
4  height: 150px;
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  background: linear-gradient(to bottom right, #FFA500, #FF4500);
28  position: absolute;
29  top: 0;
30  left: 0;
31  right: 0;
32  bottom: 0;
33  margin: auto;
34  transform-origin: center top;
35  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
36}
37
38.pyramid-loader .wrapper .side1 {
39  transform: rotateZ(-30deg) rotateY(90deg);
40  background: linear-gradient(to bottom right, #FF4500, #FFA500);
41}
42
43.pyramid-loader .wrapper .side2 {
44  transform: rotateZ(30deg) rotateY(90deg);
45  background: linear-gradient(to bottom right, #FFA500, #FF4500);
46}
47
48.pyramid-loader .wrapper .side3 {
49  transform: rotateX(30deg);
50  background: linear-gradient(to bottom right, #FFA500, #FF4500);
51}
52
53.pyramid-loader .wrapper .side4 {
54  transform: rotateX(-30deg);
55  background: linear-gradient(to bottom right, #FF4500, #FFA500);
56}
57
58.pyramid-loader .wrapper .shadow {
59  width: 60px;
60  height: 60px;
61  background: #FF8C00;
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(12px);
70}