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(to bottom,
39            hsl(0, 0%, 100%) 0%,
40            hsl(0, 0%, 100%) 5.5%,
41            hsl(0, 0%, 100%) 12.1%,
42            hsl(0, 0%, 0%) 100%,
43            hsl(0, 0%, 100%) 27.9%,
44            hsl(0, 0%, 100%) 36.6%,
45            hsl(0, 0%, 100%) 45.6%,
46            hsl(0, 0%, 0%) 100%,
47            hsl(0, 0%, 100%) 63.4%,
48            hsl(0, 0%, 100%) 71.7%,
49            hsl(0, 0%, 100%) 79.4%,
50            hsl(0, 0%, 0%) 100%,
51            hsl(0, 0%, 100%) 100%,
52            hsl(0, 0%, 100%) 100%,
53            hsl(0, 0%, 100%) 100%,
54            hsl(0, 0%, 0%) 100%);
55}
56
57.cube-top {
58  position: absolute;
59  width: 75px;
60  height: 75px;
61  background: hsl(0, 0%, 98%) 0%;
62    /* width 75px / 2 = 37.5px */
63  transform: rotateX(90deg) translateZ(37.5px);
64  transform-style: preserve-3d;
65}
66
67.cube-top::before {
68  content: '';
69  position: absolute;
70    /* u can choose any size */
71  width: 75px;
72  height: 75px;
73  background: hsl(0, 0%, 33%) 19.6%;
74  transform: translateZ(-90px);
75  filter: blur(10px);
76  box-shadow: 0 0 10px #ffffff,
77        0 0 20px hsl(0, 0%, 0%) 19.6%,
78        0 0 30px #ffffff,
79        0 0 40px hsl(0, 0%, 0%) 19.6%;
80}
81
82