Loader by adamgiebl

1.cube-loader {
2  position: relative;
3  width: 100px;
4  height: 100px;
5  transform-style: preserve-3d;
6  transform: rotateX(-30deg);
7  animation: animate 4s linear infinite;
8}
9
10@keyframes animate {
11  0% {
12    transform: rotateX(-30deg) rotateY(0);
13  }
14
15  100% {
16    transform: rotateX(-30deg) rotateY(360deg);
17  }
18}
19
20.cube-loader .cube-wrapper {
21  position: absolute;
22  width: 100%;
23  height: 100%;
24  transform-style: preserve-3d;
25}
26
27.cube-loader .cube-wrapper .cube-span {
28  position: absolute;
29  width: 100%;
30  height: 100%;
31  transform: rotateY(calc(90deg * var(--i))) translateZ(50px);
32  background: linear-gradient(
33    to bottom,
34    hsl(200, 80%, 50%) 0%,
35    hsl(200, 80%, 60%) 100%
36  );
37}
38
39.cube-top {
40  position: absolute;
41  width: 100px;
42  height: 100px;
43  background: hsl(200, 80%, 50%);
44  transform: rotateX(90deg) translateZ(50px);
45  transform-style: preserve-3d;
46}
47
48.cube-top::before {
49  content: '';
50  position: absolute;
51  width: 100px;
52  height: 100px;
53  background: hsl(200, 80%, 60%);
54  transform: translateZ(-100px);
55  filter: blur(10px);
56  box-shadow: 0 0 10px #333,
57              0 0 20px hsl(200, 80%, 60%),
58              0 0 30px #333,
59              0 0 40px hsl(200, 80%, 60%);
60}