Loader by JkHuger made with CSS

#e8e8e8

1.section-center {
2  position: absolute;
3  top: 50%;
4  left: 0;
5  z-index: 10;
6  transform: translateY(-50%);
7  width: 100%;
8  margin: 0 auto;
9  text-align: center;
10  -webkit-transition: all 500ms linear;
11  transition: all 500ms linear;
12}
13
14.section-path {
15  position: relative;
16  width: 238px;
17  height: 76px;
18  border-radius: 35px;
19  margin: 0 auto;
20  text-align: center;
21  background-color: #e6e6e6;
22  box-shadow: inset -2px 20px 10px 0 rgba(0,0,0,.06),
23		inset -2px 30px 10px 0 rgba(0,0,0,.04);
24  border: 3px groove rgba(225,225,225,0.07);
25  overflow: hidden;
26  -webkit-transition: all 300ms linear;
27  transition: all 300ms linear;
28}
29
30.globe {
31  position: relative;
32  width: 66px;
33  height: 66px;
34  overflow: hidden;
35  margin-top: 2px;
36  margin-left: 2px;
37  border-radius: 50%;
38  box-shadow: 0 10px 40px rgba(0,0,0,0.65);
39  animation: rotateBall 4s ease infinite;
40  -webkit-transition: all 300ms linear;
41  transition: all 300ms linear;
42}
43
44@keyframes rotateBall {
45  0% {
46    transform: translateX(0);
47  }
48
49  50% {
50    transform: translateX(162px);
51  }
52
53  100% {
54    transform: translateX(0);
55  }
56}
57
58.globe:after {
59  position: absolute;
60  width: 5px;
61  height: 12px;
62  background-color: rgba(255, 255, 255, 0.1);
63  content: '';
64  left: 40px;
65  top: 15px;
66  border-radius: 50%;
67  z-index: 2;
68  box-shadow: 0 0 14px 7px rgba(255, 255, 255, 0.1);
69}
70
71.globe:before {
72  position: absolute;
73  width: 100%;
74  height: 100%;
75  content: '';
76  left: 0;
77  top: 0;
78  border-radius: 50%;
79  z-index: 1;
80  box-shadow: inset 0 0 15px #1a252f;
81  opacity: 0.4;
82  -webkit-transition: all 300ms linear;
83  transition: all 300ms linear;
84}
85
86.globe .wrapper {
87  position: absolute;
88  width: 528px;
89  height: 528px;
90  top: 0;
91  left: -462px;
92  animation: moveBall 4s ease infinite;
93}
94
95@keyframes moveBall {
96  0% {
97    left: -462px;
98  }
99
100  50% {
101    left: 0;
102  }
103
104  100% {
105    left: -462px;
106  }
107}
108
109.globe .wrapper span {
110  position: absolute;
111  width: 33px;
112  height: 528px;
113  top: 0;
114  left: 0;
115  background-color: #5c477d;
116  box-shadow: inset 0 0 25px #5c487c;
117}
118
119.globe .wrapper span:nth-child(2) {
120  left: 33px;
121  background-color: #503e6d;
122}
123
124.globe .wrapper span:nth-child(3) {
125  left: 66px;
126}
127
128.globe .wrapper span:nth-child(4) {
129  left: 99px;
130  background-color: #503e6d;
131}
132
133.globe .wrapper span:nth-child(5) {
134  left: 132px;
135}
136
137.globe .wrapper span:nth-child(6) {
138  left: 165px;
139  background-color: #503e6d;
140}
141
142.globe .wrapper span:nth-child(7) {
143  left: 198px;
144}
145
146.globe .wrapper span:nth-child(8) {
147  left: 231px;
148  background-color: #503e6d;
149}
150
151.globe .wrapper span:nth-child(9) {
152  left: 264px;
153}
154
155.globe .wrapper span:nth-child(10) {
156  left: 297px;
157  background-color: #503e6d;
158}
159
160.globe .wrapper span:nth-child(11) {
161  left: 330px;
162}
163
164.globe .wrapper span:nth-child(12) {
165  left: 363px;
166  background-color: #503e6d;
167}
168
169.globe .wrapper span:nth-child(13) {
170  left: 396px;
171}
172
173.globe .wrapper span:nth-child(14) {
174  left: 429px;
175  background-color: #503e6d;
176}
177
178.globe .wrapper span:nth-child(15) {
179  left: 462px;
180}
181
182.globe .wrapper span:nth-child(16) {
183  left: 495px;
184  background-color: #503e6d;
185}
186
187#switch,
188#circle {
189  cursor: pointer;
190  -webkit-transition: all 300ms linear;
191  transition: all 300ms linear;
192}
193
194#switch {
195  width: 70px;
196  height: 8px;
197  margin: 0 auto;
198  text-align: center;
199  border: 2px solid #8167a9;
200  border-radius: 27px;
201  background: #000;
202  position: relative;
203  display: inline-block;
204  margin-top: 40px;
205  margin-bottom: 20px;
206}
207
208#circle {
209  position: absolute;
210  top: -11px;
211  left: 5px;
212  width: 26px;
213  height: 26px;
214  border-radius: 50%;
215  box-shadow: 0 4px 4px rgba(0,0,0,0.25), 0 0 0 1px rgba(26,53,71,0.07);
216  background: #000;
217}
218
219.switched {
220  border-color: #000 !important;
221  background: #8167a9 !important;
222}
223
224.switched #circle {
225  left: 35px;
226  background: #fff;
227}
228
229.section-center p span {
230  position: relative;
231  padding: 4px 10px;
232  margin: 0 5px;
233}
234
235.section-center p span:before {
236  position: absolute;
237  content: '';
238  width: 100%;
239  height: 100%;
240  border-radius: 4px;
241  background-color: #8167a9;
242  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
243  left: 0;
244  top: 0;
245  z-index: -1;
246  -webkit-transition: all 300ms linear;
247  transition: all 300ms linear;
248}
249
250.section-center p span:after {
251  position: absolute;
252  content: '';
253  width: calc(100% - 10px);
254  height: 2px;
255  border-radius: 4px;
256  background-color: #fff;
257  left: 5px;
258  top: 50%;
259  z-index: 1;
260  -webkit-transition: all 300ms linear;
261  transition: all 300ms linear;
262}
263
264.section-center p span:nth-child(2):after {
265  opacity: 0;
266}

.section-center {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 10;
  transform: translateY(-50%);
  width: 100%;
  margin: 0 auto;
  text-align: center;
  -webkit-transition: all 500ms linear;
  transition: all 500ms linear;
}

.section-path {
  position: relative;
  width: 238px;
  height: 76px;
  border-radius: 35px;
  margin: 0 auto;
  text-align: center;
  background-color: #e6e6e6;
  box-shadow: inset -2px 20px 10px 0 rgba(0,0,0,.06),
		inset -2px 30px 10px 0 rgba(0,0,0,.04);
  border: 3px groove rgba(225,225,225,0.07);
  overflow: hidden;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

.globe {
  position: relative;
  width: 66px;
  height: 66px;
  overflow: hidden;
  margin-top: 2px;
  margin-left: 2px;
  border-radius: 50%;
  box-shadow: 0 10px 40px rgba(0,0,0,0.65);
  animation: rotateBall 4s ease infinite;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

@keyframes rotateBall {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(162px);
  }

  100% {
    transform: translateX(0);
  }
}

.globe:after {
  position: absolute;
  width: 5px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.1);
  content: '';
  left: 40px;
  top: 15px;
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0 0 14px 7px rgba(255, 255, 255, 0.1);
}

.globe:before {
  position: absolute;
  width: 100%;
  height: 100%;
  content: '';
  left: 0;
  top: 0;
  border-radius: 50%;
  z-index: 1;
  box-shadow: inset 0 0 15px #1a252f;
  opacity: 0.4;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

.globe .wrapper {
  position: absolute;
  width: 528px;
  height: 528px;
  top: 0;
  left: -462px;
  animation: moveBall 4s ease infinite;
}

@keyframes moveBall {
  0% {
    left: -462px;
  }

  50% {
    left: 0;
  }

  100% {
    left: -462px;
  }
}

.globe .wrapper span {
  position: absolute;
  width: 33px;
  height: 528px;
  top: 0;
  left: 0;
  background-color: #5c477d;
  box-shadow: inset 0 0 25px #5c487c;
}

.globe .wrapper span:nth-child(2) {
  left: 33px;
  background-color: #503e6d;
}

.globe .wrapper span:nth-child(3) {
  left: 66px;
}

.globe .wrapper span:nth-child(4) {
  left: 99px;
  background-color: #503e6d;
}

.globe .wrapper span:nth-child(5) {
  left: 132px;
}

.globe .wrapper span:nth-child(6) {
  left: 165px;
  background-color: #503e6d;
}

.globe .wrapper span:nth-child(7) {
  left: 198px;
}

.globe .wrapper span:nth-child(8) {
  left: 231px;
  background-color: #503e6d;
}

.globe .wrapper span:nth-child(9) {
  left: 264px;
}

.globe .wrapper span:nth-child(10) {
  left: 297px;
  background-color: #503e6d;
}

.globe .wrapper span:nth-child(11) {
  left: 330px;
}

.globe .wrapper span:nth-child(12) {
  left: 363px;
  background-color: #503e6d;
}

.globe .wrapper span:nth-child(13) {
  left: 396px;
}

.globe .wrapper span:nth-child(14) {
  left: 429px;
  background-color: #503e6d;
}

.globe .wrapper span:nth-child(15) {
  left: 462px;
}

.globe .wrapper span:nth-child(16) {
  left: 495px;
  background-color: #503e6d;
}

#switch,
#circle {
  cursor: pointer;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

#switch {
  width: 70px;
  height: 8px;
  margin: 0 auto;
  text-align: center;
  border: 2px solid #8167a9;
  border-radius: 27px;
  background: #000;
  position: relative;
  display: inline-block;
  margin-top: 40px;
  margin-bottom: 20px;
}

#circle {
  position: absolute;
  top: -11px;
  left: 5px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: 0 4px 4px rgba(0,0,0,0.25), 0 0 0 1px rgba(26,53,71,0.07);
  background: #000;
}

.switched {
  border-color: #000 !important;
  background: #8167a9 !important;
}

.switched #circle {
  left: 35px;
  background: #fff;
}

.section-center p span {
  position: relative;
  padding: 4px 10px;
  margin: 0 5px;
}

.section-center p span:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background-color: #8167a9;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
  left: 0;
  top: 0;
  z-index: -1;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

.section-center p span:after {
  position: absolute;
  content: '';
  width: calc(100% - 10px);
  height: 2px;
  border-radius: 4px;
  background-color: #fff;
  left: 5px;
  top: 50%;
  z-index: 1;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

.section-center p span:nth-child(2):after {
  opacity: 0;
}

Toggle prefixes

15K views

Comments

Variations

Get code

Link to post

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.