Loader by vikas7754

1.glowing-cube {
2  position: relative;
3  width: 150px;
4  height: 150px;
5  transform-style: preserve-3d;
6  animation: cube-rotate 4s linear infinite;
7}
8
9@keyframes cube-rotate {
10  0% {
11    transform: rotatex(-30deg) rotatey(0deg);
12  }
13
14  100% {
15    transform: rotatex(-30deg) rotatey(360deg);
16  }
17}
18
19.glowing-cube div {
20  position: absolute;
21  inset: 0;
22  transform-style: preserve-3d;
23}
24
25.glowing-cube div span {
26  position: absolute;
27  inset: 0;
28  background: linear-gradient(#151515, #3aff5e);
29  transform: rotatey(calc(90deg * var(--i))) translatez(calc(150px / 2));
30}
31
32.glowing-cube .top {
33  position: absolute;
34  inset: 0;
35  background: #222;
36  transform: rotatex(90deg) translatez(calc(150px / 2));
37  display: flex;
38  justify-content: center;
39  align-items: center;
40  color: var(--top-font-color);
41  font-size: 7rem;
42}
43
44.glowing-cube .top::before {
45  content: '';
46  position: absolute;
47  background: #3aff5e;
48  inset: 0;
49  transform: translatez(calc(0px - calc(150px + 100px)));
50  filter: blur(30px);
51  box-shadow: 0 0 120px rgba(58, 134, 255, 0.2),
52    0 0 200px rgba(58, 134, 255, 0.4),
53    0 0 300px #00ff2f,
54    0 0 400px #51fd71,
55    0 0 500px #3aff5e;
56}