Loader by adamgiebl

#212121

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

.section-center {
  z-index: 10;
  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: #3B3B3B;
  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: #F2F2F2;
  box-shadow: inset 0 0 25px #E1E1E1;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#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 #5C5C5C;
  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: #5C5C5C !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: #5C5C5C;
  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

1.3K views

Variation of aloader

Copy to Figma

1.3K views

Variation of aloader

Comments

MIT License

Copyright - 2024 JkHuger (JkHuger) 
Copyright - 2024 adamgiebl (Adam Giebl) 

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.