Component - Kodeset

Loader

 1 
 2<div class="loader">
 3  <div class="text"><span>Loading</span></div>
 4  <div class="text"><span>Loading</span></div>
 5  <div class="text"><span>Loading</span></div>
 6  <div class="text"><span>Loading</span></div>
 7  <div class="text"><span>Loading</span></div>
 8  <div class="text"><span>Loading</span></div>
 9  <div class="text"><span>Loading</span></div>
10  <div class="text"><span>Loading</span></div>
11  <div class="text"><span>Loading</span></div>
12  <div class="line"></div>
13</div>

  1 
  2.loader {
  3  --main-size: 4em;
  4  --text-color: #ffffff;
  5  --shine-color: #ffffff40;
  6  --shadow-color: #aaaaaa;
  7  display: flex;
  8  justify-content: center;
  9  align-items: center;
 10  overflow: hidden;
 11  user-select: none;
 12  position: relative;
 13  font-size: var(--main-size);
 14  font-weight: 900;
 15  text-transform: uppercase;
 16  color: var(--text-color);
 17  width: 7.3em;
 18  height: 1em;
 19  filter: drop-shadow(0 0 0.05em var(--shine-color));
 20}
 21 
 22.loader .text {
 23  display: flex;
 24  align-items: center;
 25  justify-content: center;
 26  text-align: center;
 27  white-space: nowrap;
 28  overflow: hidden;
 29  position: absolute;
 30}
 31 
 32.loader .text:nth-child(1) {
 33  clip-path: polygon(0% 0%, 11.11% 0%, 11.11% 100%, 0% 100%);
 34  font-size: calc(var(--main-size) / 20);
 35  margin-left: -2.1em;
 36  opacity: 0.6;
 37}
 38 
 39.loader .text:nth-child(2) {
 40  clip-path: polygon(11.11% 0%, 22.22% 0%, 22.22% 100%, 11.11% 100%);
 41  font-size: calc(var(--main-size) / 16);
 42  margin-left: -0.98em;
 43  opacity: 0.7;
 44}
 45 
 46.loader .text:nth-child(3) {
 47  clip-path: polygon(22.22% 0%, 33.33% 0%, 33.33% 100%, 22.22% 100%);
 48  font-size: calc(var(--main-size) / 13);
 49  margin-left: -0.33em;
 50  opacity: 0.8;
 51}
 52 
 53.loader .text:nth-child(4) {
 54  clip-path: polygon(33.33% 0%, 44.44% 0%, 44.44% 100%, 33.33% 100%);
 55  font-size: calc(var(--main-size) / 11);
 56  margin-left: -0.05em;
 57  opacity: 0.9;
 58}
 59 
 60.loader .text:nth-child(5) {
 61  clip-path: polygon(44.44% 0%, 55.55% 0%, 55.55% 100%, 44.44% 100%);
 62  font-size: calc(var(--main-size) / 10);
 63  margin-left: 0em;
 64  opacity: 1;
 65}
 66 
 67.loader .text:nth-child(6) {
 68  clip-path: polygon(55.55% 0%, 66.66% 0%, 66.66% 100%, 55.55% 100%);
 69  font-size: calc(var(--main-size) / 11);
 70  margin-left: 0.05em;
 71  opacity: 0.9;
 72}
 73 
 74.loader .text:nth-child(7) {
 75  clip-path: polygon(66.66% 0%, 77.77% 0%, 77.77% 100%, 66.66% 100%);
 76  font-size: calc(var(--main-size) / 13);
 77  margin-left: 0.33em;
 78  opacity: 0.8;
 79}
 80 
 81.loader .text:nth-child(8) {
 82  clip-path: polygon(77.77% 0%, 88.88% 0%, 88.88% 100%, 77.77% 100%);
 83  font-size: calc(var(--main-size) / 16);
 84  margin-left: 0.98em;
 85  opacity: 0.7;
 86}
 87 
 88.loader .text:nth-child(9) {
 89  clip-path: polygon(88.88% 0%, 100% 0%, 100% 100%, 88.88% 100%);
 90  font-size: calc(var(--main-size) / 20);
 91  margin-left: 2.1em;
 92  opacity: 0.6;
 93}
 94 
 95.loader .text span {
 96  animation:
 97    scrolling 2s cubic-bezier(0.1, 0.6, 0.9, 0.4) infinite,
 98    shadow 2s cubic-bezier(0.1, 0.6, 0.9, 0.4) infinite;
 99}
100 
101.loader .text:nth-child(1) span {
102  background: linear-gradient(
103    to right,
104    var(--text-color) 4%,
105    var(--shadow-color) 7%
106  );
107  background-size: 200% auto;
108  background-clip: text;
109  color: transparent;
110}
111 
112.loader .text:nth-child(2) span {
113  background: linear-gradient(
114    to right,
115    var(--text-color) 9%,
116    var(--shadow-color) 13%
117  );
118  background-size: 200% auto;
119  background-clip: text;
120  color: transparent;
121}
122 
123.loader .text:nth-child(3) span {
124  background: linear-gradient(
125    to right,
126    var(--text-color) 15%,
127    var(--shadow-color) 18%
128  );
129  background-size: 200% auto;
130  background-clip: text;
131  color: transparent;
132}
133 
134.loader .text:nth-child(4) span {
135  background: linear-gradient(
136    to right,
137    var(--text-color) 20%,
138    var(--shadow-color) 23%
139  );
140  background-size: 200% auto;
141  background-clip: text;
142  color: transparent;
143}
144 
145.loader .text:nth-child(6) span {
146  background: linear-gradient(
147    to right,
148    var(--shadow-color) 29%,
149    var(--text-color) 32%
150  );
151  background-size: 200% auto;
152  background-clip: text;
153  color: transparent;
154}
155 
156.loader .text:nth-child(7) span {
157  background: linear-gradient(
158    to right,
159    var(--shadow-color) 34%,
160    var(--text-color) 37%
161  );
162  background-size: 200% auto;
163  background-clip: text;
164  color: transparent;
165}
166 
167.loader .text:nth-child(8) span {
168  background: linear-gradient(
169    to right,
170    var(--shadow-color) 39%,
171    var(--text-color) 42%
172  );
173  background-size: 200% auto;
174  background-clip: text;
175  color: transparent;
176}
177 
178.loader .text:nth-child(9) span {
179  background: linear-gradient(
180    to right,
181    var(--shadow-color) 45%,
182    var(--text-color) 48%
183  );
184  background-size: 200% auto;
185  background-clip: text;
186  color: transparent;
187}
188 
189.loader .line {
190  position: relative;
191  display: flex;
192  align-items: center;
193  justify-content: center;
194  overflow: hidden;
195  height: 0.05em;
196  width: calc(var(--main-size) / 2);
197  margin-top: 0.9em;
198  border-radius: 0.05em;
199}
200 
201.loader .line::before {
202  content: "";
203  position: absolute;
204  height: 100%;
205  width: 100%;
206  background-color: var(--text-color);
207  opacity: 0.3;
208}
209 
210.loader .line::after {
211  content: "";
212  position: absolute;
213  height: 100%;
214  width: 100%;
215  background-color: var(--text-color);
216  border-radius: 0.05em;
217  transform: translateX(-90%);
218  animation: wobble 2s cubic-bezier(0.5, 0.8, 0.5, 0.2) infinite;
219}
220 
221@keyframes wobble {
222  0% {
223    transform: translateX(-90%);
224  }
225  50% {
226    transform: translateX(90%);
227  }
228  100% {
229    transform: translateX(-90%);
230  }
231}
232 
233@keyframes scrolling {
234  0% {
235    transform: translateX(-100%);
236  }
237  100% {
238    transform: translateX(100%);
239  }
240}
241 
242@keyframes shadow {
243  0% {
244    background-position: -98% 0;
245  }
246  100% {
247    background-position: 102% 0;
248  }
249}

MIT License

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.