Loader by andrew-demchenk0

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(330, 3.13%, 25.1%) 0%,
41    hsl(177.27, 21.71%, 32.06%) 5.5%,
42    hsl(176.67, 34.1%, 36.88%) 12.1%,
43    hsl(176.61, 42.28%, 40.7%) 19.6%,
44    hsl(176.63, 48.32%, 43.88%) 27.9%,
45    hsl(176.66, 53.07%, 46.58%) 36.6%,
46    hsl(176.7, 56.94%, 48.91%) 45.6%,
47    hsl(176.74, 62.39%, 50.91%) 54.6%,
48    hsl(176.77, 69.86%, 52.62%) 63.4%,
49    hsl(176.8, 76.78%, 54.08%) 71.7%,
50    hsl(176.83, 83.02%, 55.29%) 79.4%,
51    hsl(176.85, 88.44%, 56.28%) 86.2%,
52    hsl(176.86, 92.9%, 57.04%) 91.9%,
53    hsl(176.88, 96.24%, 57.59%) 96.3%,
54    hsl(176.88, 98.34%, 57.93%) 99%,
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(330, 3.13%, 25.1%) 0%;
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