1.cube-loader {
2  position: relative;
3  /* u can choose any size */
4  width: 75px;
5  height: 75px;
6  transform-style: preserve-3d;
7  transform: rotateX(-30deg);
8  animation: animate 4s linear infinite;
9}
10
11@keyframes animate {
12  0% {
13    transform: rotateX(-30deg) rotateY(0);
14  }
15
16  100% {
17    transform: rotateX(-30deg) rotateY(360deg);
18  }
19}
20
21.cube-loader .cube-wrapper {
22  position: absolute;
23  width: 100%;
24  height: 100%;
25    /* top: 0;
26    left: 0; */
27  transform-style: preserve-3d;
28}
29
30.cube-loader .cube-wrapper .cube-span {
31  position: absolute;
32  width: 100%;
33  height: 100%;
34    /* top: 0;
35    left: 0; */
36                                       /* width 75px / 2 = 37.5px */
37  transform: rotateY(calc(90deg * var(--i))) translateZ(37.5px);
38  background: linear-gradient(
39      to bottom,
40      hsl(176.89, 99.07%, 58.04%) 100%,
41      hsl(176.89, 99.07%, 58.04%) 100%,
42      hsl(176.89, 99.07%, 58.04%) 100%,
43      hsl(176.89, 99.07%, 58.04%) 100%,
44      hsl(176.89, 99.07%, 58.04%) 100%,
45      hsl(176.89, 99.07%, 58.04%) 100%,
46      hsl(176.89, 99.07%, 58.04%) 100%,
47      hsl(176.89, 99.07%, 58.04%) 100%,
48      hsl(176.89, 99.07%, 58.04%) 100%,
49      hsl(176.89, 99.07%, 58.04%) 100%,
50      hsl(176.89, 99.07%, 58.04%) 100%,
51      hsl(176.89, 99.07%, 58.04%) 100%,
52      hsl(176.89, 99.07%, 58.04%) 100%,
53      hsl(176.89, 99.07%, 58.04%) 100%,
54      hsl(176.89, 99.07%, 58.04%) 100%,
55      hsl(176.89, 99.07%, 58.04%) 100%
56    );
57}
58
59.cube-top {
60  position: absolute;
61  width: 75px;
62  height: 75px;
63  background: hsl(176.89, 99.07%, 58.04%) 100%;
64                        /* width 75px / 2 = 37.5px */
65  transform: rotateX(90deg) translateZ(37.5px);
66  transform-style: preserve-3d;
67}
68
69.cube-top::before {
70  content: '';
71  position: absolute;
72  /* u can choose any size */
73  width: 75px;
74  height: 75px;
75  background: hsl(176.61, 42.28%, 40.7%) 19.6%;
76  transform: translateZ(-90px);
77  filter: blur(10px);
78  box-shadow: 0 0 10px #323232,
79                0 0 20px hsl(176.61, 42.28%, 40.7%) 19.6%,
80                0 0 30px #323232,
81                0 0 40px hsl(176.61, 42.28%, 40.7%) 19.6%;
82}
83