Loader by uxRakhal

#212121

1.typewriter {
2  --blue: #5cbbff;
3  --blue-dark: #162d72;
4  --key: #fff;
5  --paper: #eef0fd;
6  --text: #00000049;
7  --tool: #ffbb00;
8  --duration: 3s;
9  position: relative;
10  -webkit-animation: bounce05 var(--duration) linear infinite;
11  animation: bounce05 var(--duration) linear infinite;
12}
13
14.typewriter .slide {
15  width: 92px;
16  height: 20px;
17  border-radius: 3px;
18  margin-left: 14px;
19  transform: translateX(14px);
20  background: linear-gradient(var(--blue), var(--blue-dark));
21  -webkit-animation: slide05 var(--duration) ease infinite;
22  animation: slide05 var(--duration) ease infinite;
23}
24
25.typewriter .slide:before,
26.typewriter .slide:after,
27.typewriter .slide i:before {
28  content: "";
29  position: absolute;
30  background: var(--tool);
31}
32
33.typewriter .slide:before {
34  width: 2px;
35  height: 8px;
36  top: 6px;
37  left: 100%;
38}
39
40.typewriter .slide:after {
41  left: 94px;
42  top: 3px;
43  height: 14px;
44  width: 6px;
45  border-radius: 3px;
46}
47
48.typewriter .slide i {
49  display: block;
50  position: absolute;
51  right: 100%;
52  width: 6px;
53  height: 4px;
54  top: 4px;
55  background: var(--tool);
56}
57
58.typewriter .slide i:before {
59  right: 100%;
60  top: -2px;
61  width: 4px;
62  border-radius: 2px;
63  height: 14px;
64}
65
66.typewriter .paper {
67  position: absolute;
68  left: 24px;
69  top: -26px;
70  width: 40px;
71  height: 46px;
72  border-radius: 5px;
73  background: var(--paper);
74  transform: translateY(46px);
75  -webkit-animation: paper05 var(--duration) linear infinite;
76  animation: paper05 var(--duration) linear infinite;
77}
78
79.typewriter .paper:before {
80  content: "";
81  position: absolute;
82  left: 6px;
83  right: 6px;
84  top: 7px;
85  border-radius: 2px;
86  height: 4px;
87  transform: scaleY(0.8);
88  background: var(--text);
89  box-shadow: 0 12px 0 var(--text), 0 24px 0 var(--text), 0 36px 0 var(--text);
90}
91
92.typewriter .keyboard {
93  width: 120px;
94  height: 56px;
95  margin-top: -10px;
96  z-index: 1;
97  position: relative;
98}
99
100.typewriter .keyboard:before,
101.typewriter .keyboard:after {
102  content: "";
103  position: absolute;
104}
105
106.typewriter .keyboard:before {
107  top: 0;
108  left: 0;
109  right: 0;
110  bottom: 0;
111  border-radius: 7px;
112  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
113  transform: perspective(10px) rotateX(2deg);
114  transform-origin: 50% 100%;
115}
116
117.typewriter .keyboard:after {
118  left: 2px;
119  top: 25px;
120  width: 11px;
121  height: 4px;
122  border-radius: 2px;
123  box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
124    60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
125    22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
126    60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
127  -webkit-animation: keyboard05 var(--duration) linear infinite;
128  animation: keyboard05 var(--duration) linear infinite;
129}
130
131@keyframes bounce05 {
132  85%,
133  92%,
134  100% {
135    transform: translateY(0);
136  }
137
138  89% {
139    transform: translateY(-4px);
140  }
141
142  95% {
143    transform: translateY(2px);
144  }
145}
146
147@keyframes slide05 {
148  5% {
149    transform: translateX(14px);
150  }
151
152  15%,
153  30% {
154    transform: translateX(6px);
155  }
156
157  40%,
158  55% {
159    transform: translateX(0);
160  }
161
162  65%,
163  70% {
164    transform: translateX(-4px);
165  }
166
167  80%,
168  89% {
169    transform: translateX(-12px);
170  }
171
172  100% {
173    transform: translateX(14px);
174  }
175}
176
177@keyframes paper05 {
178  5% {
179    transform: translateY(46px);
180  }
181
182  20%,
183  30% {
184    transform: translateY(34px);
185  }
186
187  40%,
188  55% {
189    transform: translateY(22px);
190  }
191
192  65%,
193  70% {
194    transform: translateY(10px);
195  }
196
197  80%,
198  85% {
199    transform: translateY(0);
200  }
201
202  92%,
203  100% {
204    transform: translateY(46px);
205  }
206}
207
208@keyframes keyboard05 {
209  5%,
210  12%,
211  21%,
212  30%,
213  39%,
214  48%,
215  57%,
216  66%,
217  75%,
218  84% {
219    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
220      60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
221      22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
222      60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
223  }
224
225  9% {
226    box-shadow: 15px 2px 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
227      60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
228      22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
229      60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
230  }
231
232  18% {
233    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
234      60px 2px 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
235      22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
236      60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
237  }
238
239  27% {
240    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
241      60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
242      22px 12px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
243      60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
244  }
245
246  36% {
247    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
248      60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
249      22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 12px 0 var(--key),
250      60px 12px 0 var(--key), 68px 12px 0 var(--key), 83px 10px 0 var(--key);
251  }
252
253  45% {
254    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
255      60px 0 0 var(--key), 75px 0 0 var(--key), 90px 2px 0 var(--key),
256      22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
257      60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
258  }
259
260  54% {
261    box-shadow: 15px 0 0 var(--key), 30px 2px 0 var(--key), 45px 0 0 var(--key),
262      60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
263      22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
264      60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
265  }
266
267  63% {
268    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
269      60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
270      22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
271      60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 12px 0 var(--key);
272  }
273
274  72% {
275    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 2px 0 var(--key),
276      60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
277      22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
278      60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
279  }
280
281  81% {
282    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
283      60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
284      22px 10px 0 var(--key), 37px 12px 0 var(--key), 52px 10px 0 var(--key),
285      60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
286  }
287}
288

.typewriter {
  --blue: #5cbbff;
  --blue-dark: #162d72;
  --key: #fff;
  --paper: #eef0fd;
  --text: #00000049;
  --tool: #ffbb00;
  --duration: 3s;
  position: relative;
  -webkit-animation: bounce05 var(--duration) linear infinite;
  animation: bounce05 var(--duration) linear infinite;
}

.typewriter .slide {
  width: 92px;
  height: 20px;
  border-radius: 3px;
  margin-left: 14px;
  transform: translateX(14px);
  background: linear-gradient(var(--blue), var(--blue-dark));
  -webkit-animation: slide05 var(--duration) ease infinite;
  animation: slide05 var(--duration) ease infinite;
}

.typewriter .slide:before,
.typewriter .slide:after,
.typewriter .slide i:before {
  content: "";
  position: absolute;
  background: var(--tool);
}

.typewriter .slide:before {
  width: 2px;
  height: 8px;
  top: 6px;
  left: 100%;
}

.typewriter .slide:after {
  left: 94px;
  top: 3px;
  height: 14px;
  width: 6px;
  border-radius: 3px;
}

.typewriter .slide i {
  display: block;
  position: absolute;
  right: 100%;
  width: 6px;
  height: 4px;
  top: 4px;
  background: var(--tool);
}

.typewriter .slide i:before {
  right: 100%;
  top: -2px;
  width: 4px;
  border-radius: 2px;
  height: 14px;
}

.typewriter .paper {
  position: absolute;
  left: 24px;
  top: -26px;
  width: 40px;
  height: 46px;
  border-radius: 5px;
  background: var(--paper);
  transform: translateY(46px);
  -webkit-animation: paper05 var(--duration) linear infinite;
  animation: paper05 var(--duration) linear infinite;
}

.typewriter .paper:before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 7px;
  border-radius: 2px;
  height: 4px;
  transform: scaleY(0.8);
  background: var(--text);
  box-shadow: 0 12px 0 var(--text), 0 24px 0 var(--text), 0 36px 0 var(--text);
}

.typewriter .keyboard {
  width: 120px;
  height: 56px;
  margin-top: -10px;
  z-index: 1;
  position: relative;
}

.typewriter .keyboard:before,
.typewriter .keyboard:after {
  content: "";
  position: absolute;
}

.typewriter .keyboard:before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  transform: perspective(10px) rotateX(2deg);
  transform-origin: 50% 100%;
}

.typewriter .keyboard:after {
  left: 2px;
  top: 25px;
  width: 11px;
  height: 4px;
  border-radius: 2px;
  box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
    60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
    22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
    60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  -webkit-animation: keyboard05 var(--duration) linear infinite;
  animation: keyboard05 var(--duration) linear infinite;
}

@keyframes bounce05 {
  85%,
  92%,
  100% {
    transform: translateY(0);
  }

  89% {
    transform: translateY(-4px);
  }

  95% {
    transform: translateY(2px);
  }
}

@keyframes slide05 {
  5% {
    transform: translateX(14px);
  }

  15%,
  30% {
    transform: translateX(6px);
  }

  40%,
  55% {
    transform: translateX(0);
  }

  65%,
  70% {
    transform: translateX(-4px);
  }

  80%,
  89% {
    transform: translateX(-12px);
  }

  100% {
    transform: translateX(14px);
  }
}

@keyframes paper05 {
  5% {
    transform: translateY(46px);
  }

  20%,
  30% {
    transform: translateY(34px);
  }

  40%,
  55% {
    transform: translateY(22px);
  }

  65%,
  70% {
    transform: translateY(10px);
  }

  80%,
  85% {
    transform: translateY(0);
  }

  92%,
  100% {
    transform: translateY(46px);
  }
}

@keyframes keyboard05 {
  5%,
  12%,
  21%,
  30%,
  39%,
  48%,
  57%,
  66%,
  75%,
  84% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
      60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
      22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
      60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }

  9% {
    box-shadow: 15px 2px 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
      60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
      22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
      60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }

  18% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
      60px 2px 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
      22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
      60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }

  27% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
      60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
      22px 12px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
      60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }

  36% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
      60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
      22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 12px 0 var(--key),
      60px 12px 0 var(--key), 68px 12px 0 var(--key), 83px 10px 0 var(--key);
  }

  45% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
      60px 0 0 var(--key), 75px 0 0 var(--key), 90px 2px 0 var(--key),
      22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
      60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }

  54% {
    box-shadow: 15px 0 0 var(--key), 30px 2px 0 var(--key), 45px 0 0 var(--key),
      60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
      22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
      60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }

  63% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
      60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
      22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
      60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 12px 0 var(--key);
  }

  72% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 2px 0 var(--key),
      60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
      22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
      60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }

  81% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
      60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
      22px 10px 0 var(--key), 37px 12px 0 var(--key), 52px 10px 0 var(--key),
      60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }
}

Toggle prefixes

442 views

Variation of aloader

Copy to Figma

442 views

Variation of aloader

Comments

MIT License

Copyright - 2024 Nawsome  
Copyright - 2024 uxRakhal (Debayan mukherjee) 

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.