Loader by Chriskoziol

1.spinnerContainer {
2  display: flex;
3  flex-direction: column;
4  align-items: center;
5}
6
7.spinner {
8  width: 56px;
9  height: 56px;
10  display: grid;
11  border: 4px solid #0000;
12  border-radius: 50%;
13  border-right-color: #299fff;
14  animation: tri-spinner 1s infinite linear;
15}
16
17.spinner::before,
18.spinner::after {
19  content: "";
20  grid-area: 1/1;
21  margin: 2px;
22  border: inherit;
23  border-radius: 50%;
24  animation: tri-spinner 2s infinite;
25}
26
27.spinner::after {
28  margin: 8px;
29  animation-duration: 3s;
30}
31
32@keyframes tri-spinner {
33  100% {
34    transform: rotate(1turn);
35  }
36}
37
38.loader {
39  color: #4a4a4a;
40  font-family: "Poppins",sans-serif;
41  font-weight: 500;
42  font-size: 25px;
43  -webkit-box-sizing: content-box;
44  box-sizing: content-box;
45  height: 40px;
46  padding: 10px 10px;
47  display: -webkit-box;
48  display: -ms-flexbox;
49  display: flex;
50  border-radius: 8px;
51}
52
53.words {
54  overflow: hidden;
55}
56
57.word {
58  display: block;
59  height: 100%;
60  padding-left: 6px;
61  color: #299fff;
62  animation: cycle-words 5s infinite;
63}
64
65@keyframes cycle-words {
66  10% {
67    -webkit-transform: translateY(-105%);
68    transform: translateY(-105%);
69  }
70
71  25% {
72    -webkit-transform: translateY(-100%);
73    transform: translateY(-100%);
74  }
75
76  35% {
77    -webkit-transform: translateY(-205%);
78    transform: translateY(-205%);
79  }
80
81  50% {
82    -webkit-transform: translateY(-200%);
83    transform: translateY(-200%);
84  }
85
86  60% {
87    -webkit-transform: translateY(-305%);
88    transform: translateY(-305%);
89  }
90
91  75% {
92    -webkit-transform: translateY(-300%);
93    transform: translateY(-300%);
94  }
95
96  85% {
97    -webkit-transform: translateY(-405%);
98    transform: translateY(-405%);
99  }
100
101  100% {
102    -webkit-transform: translateY(-400%);
103    transform: translateY(-400%);
104  }
105}
106