Loader by roroland

1.loader {
2  --col1: rgba(228, 19, 141, 0.925);
3  --col2: rgb(255, 179, 80);
4  font-size: 2em;
5  font-weight: 600;
6  perspective: 800px;
7  position: relative;
8}
9
10.loader::after,
11.loader::before,
12.loader .text::after,
13.loader .text::before {
14  perspective: 800px;
15  animation: anim 2s ease-in-out infinite, dotMove 10s ease-out alternate infinite, move 10s linear infinite 1s;
16  ;
17  content: '●';
18  color: var(--col1);
19  position: absolute;
20  translate: -60px 500px;
21  width: 5px;
22  height: 5px;
23}
24
25.loader::before {
26  animation-delay: 3s;
27  color: var(--col1);
28}
29
30.loader .text::before {
31  color: var(--col2);
32  animation-delay: 2s;
33}
34
35.loader .text::after {
36  color: var(--col2);
37}
38
39.loader .text {
40  animation: anim 20s linear infinite, move 10s linear infinite 1s;
41  color: transparent;
42  background-image: linear-gradient(90deg, 
43  var(--col1) 0%,
44  var(--col2) 100%);
45  background-clip: text;
46  background-size: 100%;
47  background-repeat: no-repeat;
48  transform: skew(5deg, -5deg);
49  -webkit-background-clip: text;
50  position: relative;
51}
52
53@keyframes anim {
54  0%, 100% {
55    text-shadow: 2px 0px 2px rgba(179, 158, 158, .5);
56  }
57
58  50% {
59    background-size: 0%;
60    background-position-x: left;
61    text-shadow: 2px 10px 6px rgba(179, 158, 158, 1);
62  }
63}
64
65@keyframes move {
66  50% {
67    translate: 0px 0px;
68    rotate: x 60deg;
69    transform: skew(-5deg, 5deg);
70  }
71}
72
73@keyframes dotMove {
74  0%, 100% {
75    translate: -60px 300px;
76  }
77
78  50% {
79    translate: 160px -250px;
80    scale: .5;
81    opacity: .85;
82  }
83}