1 
 2<div class="cube-loader">
 3  <div class="cube-top"></div>
 4  <div class="cube-wrapper">
 5    <span style="--i:0" class="cube-span"></span>
 6    <span style="--i:1" class="cube-span"></span>
 7    <span style="--i:2" class="cube-span"></span>
 8    <span style="--i:3" class="cube-span"></span>
 9  </div>
10</div>          

 1 
 2.cube-loader {
 3  position: relative;
 4/* u can choose any size */
 5  width: 75px;
 6  height: 75px;
 7  transform-style: preserve-3d;
 8  transform: rotateX(-30deg);
 9  animation: animate 4s linear infinite;
10}
11 
12@keyframes animate {
13  0% {
14    transform: rotateX(-30deg) rotateY(0);
15  }
16 
17  100% {
18    transform: rotateX(-30deg) rotateY(360deg);
19  }
20}
21 
22.cube-loader .cube-wrapper {
23  position: absolute;
24  width: 100%;
25  height: 100%;
26  /* top: 0;
27  left: 0; */
28  transform-style: preserve-3d;
29}
30 
31.cube-loader .cube-wrapper .cube-span {
32  position: absolute;
33  width: 100%;
34  height: 100%;
35  /* top: 0;
36  left: 0; */
37                                     /* width 75px / 2 = 37.5px */
38  transform: rotateY(calc(90deg * var(--i))) translateZ(37.5px);
39  background: linear-gradient(
40    to bottom,
41    hsl(330, 3.13%, 25.1%) 0%,
42    hsl(177.27, 21.71%, 32.06%) 5.5%,
43    hsl(176.67, 34.1%, 36.88%) 12.1%,
44    hsl(176.61, 42.28%, 40.7%) 19.6%,
45    hsl(176.63, 48.32%, 43.88%) 27.9%,
46    hsl(176.66, 53.07%, 46.58%) 36.6%,
47    hsl(176.7, 56.94%, 48.91%) 45.6%,
48    hsl(176.74, 62.39%, 50.91%) 54.6%,
49    hsl(176.77, 69.86%, 52.62%) 63.4%,
50    hsl(176.8, 76.78%, 54.08%) 71.7%,
51    hsl(176.83, 83.02%, 55.29%) 79.4%,
52    hsl(176.85, 88.44%, 56.28%) 86.2%,
53    hsl(176.86, 92.9%, 57.04%) 91.9%,
54    hsl(176.88, 96.24%, 57.59%) 96.3%,
55    hsl(176.88, 98.34%, 57.93%) 99%,
56    hsl(176.89, 99.07%, 58.04%) 100%
57  );
58}
59 
60.cube-top {
61  position: absolute;
62  width: 75px;
63  height: 75px;
64  background: hsl(330, 3.13%, 25.1%) 0%;
65                      /* width 75px / 2 = 37.5px */
66  transform: rotateX(90deg) translateZ(37.5px);
67  transform-style: preserve-3d;
68}
69 
70.cube-top::before {
71  content: '';
72  position: absolute;
73/* u can choose any size */
74  width: 75px;
75  height: 75px;
76  background: hsl(176.61, 42.28%, 40.7%) 19.6%;
77  transform: translateZ(-90px);
78  filter: blur(10px);
79  box-shadow: 0 0 10px #323232,
80              0 0 20px hsl(176.61, 42.28%, 40.7%) 19.6%,
81              0 0 30px #323232,
82              0 0 40px hsl(176.61, 42.28%, 40.7%) 19.6%;
83}