Loader by lukepadiachy

1.my-loader {
2  width: 200px;
3  height: 200px;
4  perspective: 1000px;
5  margin: 100px auto;
6}
7
8.rubiks-cube {
9  width: 100%;
10  height: 100%;
11  position: relative;
12  transform-style: preserve-3d;
13  animation: my-rotateCube 5s infinite linear;
14}
15
16.my-loader .face {
17  position: absolute;
18  display: flex;
19  flex-wrap: wrap;
20  width: 100%;
21  height: 100%;
22}
23
24.my-loader .face.front {
25  transform: translateZ(100px);
26}
27.my-loader .face.back {
28  transform: rotateY(180deg) translateZ(100px);
29}
30.my-loader .face.left {
31  transform: rotateY(-90deg) translateZ(100px);
32}
33.my-loader .face.right {
34  transform: rotateY(90deg) translateZ(100px);
35}
36.my-loader .face.top {
37  transform: rotateX(90deg) translateZ(100px);
38}
39.my-loader .face.bottom {
40  transform: rotateX(-90deg) translateZ(100px);
41}
42
43.my-loader .cube {
44  width: calc(100% / 3);
45  height: calc(100% / 3);
46  box-sizing: border-box;
47  border: 1px solid #000;
48}
49
50@keyframes my-rotateCube {
51  0% {
52    transform: rotateX(0deg) rotateY(0deg);
53  }
54  100% {
55    transform: rotateX(360deg) rotateY(360deg);
56  }
57}
58