Loader by Cobp

1.loader {
2  position: relative;
3  display: flex;
4  align-items: center;
5  justify-content: center;
6  width: 100px;
7  height: 100px;
8  margin: 130px 0;
9  perspective: 780px;
10}
11
12.text {
13  font-size: 20px;
14  font-weight: 700;
15  color: #cecece;
16  z-index: 10;
17}
18
19.load-inner {
20  position: absolute;
21  width: 100%;
22  height: 100%;
23  box-sizing: border-box;
24  border-radius: 50%;
25}
26
27.load-inner.load-one {
28  left: 0%;
29  top: 0%;
30  border-bottom: 3px solid #5c5edc;
31  animation: rotate1 1.15s linear infinite;
32}
33
34.load-inner.load-two {
35  right: 0%;
36  top: 0%;
37  border-right: 3px solid #9147ff;
38  animation: rotate2 1.15s 0.1s linear infinite;
39}
40
41.load-inner.load-three {
42  right: 0%;
43  bottom: 0%;
44  border-top: 3px solid #3b82f6;
45  animation: rotate3 1.15s 0.15s linear infinite;
46}
47
48@keyframes rotate1 {
49  0% {
50    transform: rotateX(45deg) rotateY(-45deg) rotateZ(0deg);
51  }
52  100% {
53    transform: rotateX(45deg) rotateY(-45deg) rotateZ(360deg);
54  }
55}
56@keyframes rotate2 {
57  0% {
58    transform: rotateX(45deg) rotateY(45deg) rotateZ(0deg);
59  }
60  100% {
61    transform: rotateX(45deg) rotateY(45deg) rotateZ(360deg);
62  }
63}
64@keyframes rotate3 {
65  0% {
66    transform: rotateX(-60deg) rotateY(0deg) rotateZ(0deg);
67  }
68  100% {
69    transform: rotateX(-60deg) rotateY(0deg) rotateZ(360deg);
70  }
71}
72