Loader by JkHuger made with CSS

#212121

1.circle {
2  position: relative;
3  left: -100px;
4  width: 0;
5  height: 0;
6  border: 50px solid #FDD835;
7  border-radius: 50%;
8  border-right-color: transparent;
9  animation: move 5s linear 0s infinite normal forwards;
10}
11
12.circle:before {
13  content: "";
14  position: absolute;
15  top: -50px;
16  left: -50px;
17  width: 0;
18  height: 0;
19  border: 50px solid #FDD835;
20  border-radius: 50%;
21  border-right-color: transparent;
22  animation: chomp1 .25s ease-in-out 0s infinite normal forwards;
23}
24
25.circle:after {
26  content: "";
27  position: absolute;
28  top: -50px;
29  left: -50px;
30  width: 0;
31  height: 0;
32  border: 50px solid #FDD835;
33  border-radius: 50%;
34  border-right-color: transparent;
35  animation: chomp2 .25s ease-in-out 0s infinite normal forwards;
36}
37
38.loader {
39  position: relative;
40  top: 50px;
41  width: 300px;
42  height: 0px;
43  border-top: 10px dotted black;
44  animation: loader_4013 5s ease-in-out 0s infinite normal forwards;
45}
46
47.dots {
48  position: relative;
49  top: 60px;
50  display: flex;
51  justify-content: center;
52  align-items: center;
53}
54
55.dot {
56  position: relative;
57  width: 10px;
58  height: 10px;
59  margin: 0 10px;
60  border-radius: 50%;
61  background: #1E88E5;
62  animation: dot1 5s linear 0s infinite none normal;
63}
64
65.dot:nth-child(1) {
66  animation-delay: 0s
67}
68
69.dot:nth-child(2) {
70  animation-delay: 0.25s
71}
72
73.dot:nth-child(3) {
74  animation-delay: 0.5s
75}
76
77.dot:nth-child(4) {
78  animation-delay: 0.75s
79}
80
81.dot:nth-child(5) {
82  animation-delay: 1s
83}
84
85.dot:nth-child(6) {
86  animation-delay: 1.25s
87}
88
89.dot:nth-child(7) {
90  animation-delay: 1.5s
91}
92
93.dot:nth-child(8) {
94  animation-delay: 1.75s
95}
96
97.dot:nth-child(9) {
98  animation-delay: 1.9s
99}
100
101.dot:nth-child(10) {
102  animation-delay: 2.1s
103}
104
105.dots2 {
106  position: relative;
107  top: 50px;
108  left: 10px;
109  display: flex;
110  justify-content: center;
111  align-items: center;
112}
113
114.dot2 {
115  position: relative;
116  left: -10px;
117  width: 10px;
118  height: 10px;
119  margin: 0 10px;
120  border-radius: 50%;
121  background: #F44336;
122  opacity: 0;
123  animation: dot2 5s linear 0s infinite none normal;
124}
125
126.dot2:nth-child(10) {
127  animation-delay: 2.5s
128}
129
130.dot2:nth-child(9) {
131  animation-delay: 2.75s
132}
133
134.dot2:nth-child(8) {
135  animation-delay: 3.0s
136}
137
138.dot2:nth-child(7) {
139  animation-delay: 3.25s
140}
141
142.dot2:nth-child(6) {
143  animation-delay: 3.5s
144}
145
146.dot2:nth-child(5) {
147  animation-delay: 3.75s
148}
149
150.dot2:nth-child(4) {
151  animation-delay: 4.0s
152}
153
154.dot2:nth-child(3) {
155  animation-delay: 4.25s
156}
157
158.dot2:nth-child(2) {
159  animation-delay: 4.5s
160}
161
162.dot2:nth-child(1) {
163  animation-delay: 4.6s
164}
165/* #F44336;, #1E88E5, #FDD835; */
166@keyframes chomp1 {
167  0% {
168    transform: rotate(0deg);
169  }
170
171  50% {
172    transform: rotate(45deg);
173  }
174
175  100% {
176    transform: rotate(0deg);
177  }
178}
179
180@keyframes chomp2 {
181  0% {
182    transform: rotate(0deg);
183  }
184
185  50% {
186    transform: rotate(-45deg);
187  }
188
189  100% {
190    transform: rotate(0deg);
191  }
192}
193
194@keyframes move {
195  0%, 100% {
196    left: -100px;
197  }
198
199  0%, 48% {
200    transform: rotateY(0deg);
201  }
202
203  50%, 100% {
204    transform: rotateY(180deg);
205  }
206
207  50% {
208    left: 100%;
209  }
210}
211
212@keyframes loader_4013 {
213  0%, 100% {
214    border-top: 10px dotted #1E88E5;
215  }
216
217  0%, 48% {
218    border-top: 10px dotted #1E88E5;
219  }
220
221  50%, 100% {
222    border-top: 10px dotted #F44336;
223  }
224
225  50% {
226    border-top: 10px dotted #F44336;
227  }
228}
229
230@keyframes dot1 {
231  0%,4% {
232    background: #1E88E5;
233    opacity: 1;
234  }
235
236  5%,94% {
237    background: #F44336;
238    opacity: 0;
239  }
240
241  95%,100% {
242    background: #1E88E5;
243    opacity: 1;
244  }
245}
246
247@keyframes dot2 {
248  0%,4% {
249    background: #F44336;
250    opacity: 1;
251  }
252
253  5%,94% {
254    opacity: 0;
255  }
256
257  95%,100% {
258    background: #F44336;
259    opacity: 1;
260  }
261}

.circle {
  position: relative;
  left: -100px;
  width: 0;
  height: 0;
  border: 50px solid #FDD835;
  border-radius: 50%;
  border-right-color: transparent;
  animation: move 5s linear 0s infinite normal forwards;
}

.circle:before {
  content: "";
  position: absolute;
  top: -50px;
  left: -50px;
  width: 0;
  height: 0;
  border: 50px solid #FDD835;
  border-radius: 50%;
  border-right-color: transparent;
  animation: chomp1 .25s ease-in-out 0s infinite normal forwards;
}

.circle:after {
  content: "";
  position: absolute;
  top: -50px;
  left: -50px;
  width: 0;
  height: 0;
  border: 50px solid #FDD835;
  border-radius: 50%;
  border-right-color: transparent;
  animation: chomp2 .25s ease-in-out 0s infinite normal forwards;
}

.loader {
  position: relative;
  top: 50px;
  width: 300px;
  height: 0px;
  border-top: 10px dotted black;
  animation: loader_4013 5s ease-in-out 0s infinite normal forwards;
}

.dots {
  position: relative;
  top: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dot {
  position: relative;
  width: 10px;
  height: 10px;
  margin: 0 10px;
  border-radius: 50%;
  background: #1E88E5;
  animation: dot1 5s linear 0s infinite none normal;
}

.dot:nth-child(1) {
  animation-delay: 0s
}

.dot:nth-child(2) {
  animation-delay: 0.25s
}

.dot:nth-child(3) {
  animation-delay: 0.5s
}

.dot:nth-child(4) {
  animation-delay: 0.75s
}

.dot:nth-child(5) {
  animation-delay: 1s
}

.dot:nth-child(6) {
  animation-delay: 1.25s
}

.dot:nth-child(7) {
  animation-delay: 1.5s
}

.dot:nth-child(8) {
  animation-delay: 1.75s
}

.dot:nth-child(9) {
  animation-delay: 1.9s
}

.dot:nth-child(10) {
  animation-delay: 2.1s
}

.dots2 {
  position: relative;
  top: 50px;
  left: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dot2 {
  position: relative;
  left: -10px;
  width: 10px;
  height: 10px;
  margin: 0 10px;
  border-radius: 50%;
  background: #F44336;
  opacity: 0;
  animation: dot2 5s linear 0s infinite none normal;
}

.dot2:nth-child(10) {
  animation-delay: 2.5s
}

.dot2:nth-child(9) {
  animation-delay: 2.75s
}

.dot2:nth-child(8) {
  animation-delay: 3.0s
}

.dot2:nth-child(7) {
  animation-delay: 3.25s
}

.dot2:nth-child(6) {
  animation-delay: 3.5s
}

.dot2:nth-child(5) {
  animation-delay: 3.75s
}

.dot2:nth-child(4) {
  animation-delay: 4.0s
}

.dot2:nth-child(3) {
  animation-delay: 4.25s
}

.dot2:nth-child(2) {
  animation-delay: 4.5s
}

.dot2:nth-child(1) {
  animation-delay: 4.6s
}
/* #F44336;, #1E88E5, #FDD835; */
@keyframes chomp1 {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(45deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes chomp2 {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-45deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes move {
  0%, 100% {
    left: -100px;
  }

  0%, 48% {
    transform: rotateY(0deg);
  }

  50%, 100% {
    transform: rotateY(180deg);
  }

  50% {
    left: 100%;
  }
}

@keyframes loader_4013 {
  0%, 100% {
    border-top: 10px dotted #1E88E5;
  }

  0%, 48% {
    border-top: 10px dotted #1E88E5;
  }

  50%, 100% {
    border-top: 10px dotted #F44336;
  }

  50% {
    border-top: 10px dotted #F44336;
  }
}

@keyframes dot1 {
  0%,4% {
    background: #1E88E5;
    opacity: 1;
  }

  5%,94% {
    background: #F44336;
    opacity: 0;
  }

  95%,100% {
    background: #1E88E5;
    opacity: 1;
  }
}

@keyframes dot2 {
  0%,4% {
    background: #F44336;
    opacity: 1;
  }

  5%,94% {
    opacity: 0;
  }

  95%,100% {
    background: #F44336;
    opacity: 1;
  }
}

Toggle prefixes

1.7K views

Comments

No variations yet

MIT License

Copyright - 2023 JkHuger (JkHuger) 

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.