Loader by isfan4ik made with CSS

#212121

1.loader {
2}
3
4.container {
5  width: 300px;
6  height: 280px;
7  position: absolute;
8  top: calc(50% - 140px);
9  left: calc(50% - 150px);
10}
11
12.coffee-header {
13  width: 100%;
14  height: 80px;
15  position: absolute;
16  top: 0;
17  left: 0;
18  background-color: #ddcfcc;
19  border-radius: 10px;
20}
21
22.coffee-header__buttons {
23  width: 25px;
24  height: 25px;
25  position: absolute;
26  top: 25px;
27  background-color: #282323;
28  border-radius: 50%;
29}
30
31.coffee-header__buttons::after {
32  content: "";
33  width: 8px;
34  height: 8px;
35  position: absolute;
36  bottom: -8px;
37  left: calc(50% - 4px);
38  background-color: #615e5e;
39}
40
41.coffee-header__button-one {
42  left: 15px;
43}
44
45.coffee-header__button-two {
46  left: 50px;
47}
48
49.coffee-header__display {
50  width: 50px;
51  height: 50px;
52  position: absolute;
53  top: calc(50% - 25px);
54  left: calc(50% - 25px);
55  border-radius: 50%;
56  background-color: #9acfc5;
57  border: 5px solid #43beae;
58  box-sizing: border-box;
59}
60
61.coffee-header__details {
62  width: 8px;
63  height: 20px;
64  position: absolute;
65  top: 10px;
66  right: 10px;
67  background-color: #9b9091;
68  box-shadow: -12px 0 0 #9b9091, -24px 0 0 #9b9091;
69}
70
71.coffee-medium {
72  width: 90%;
73  height: 160px;
74  position: absolute;
75  top: 80px;
76  left: calc(50% - 45%);
77  background-color: #bcb0af;
78}
79
80.coffee-medium:before {
81  content: "";
82  width: 90%;
83  height: 100px;
84  background-color: #776f6e;
85  position: absolute;
86  bottom: 0;
87  left: calc(50% - 45%);
88  border-radius: 20px 20px 0 0;
89}
90
91.coffe-medium__exit {
92  width: 60px;
93  height: 20px;
94  position: absolute;
95  top: 0;
96  left: calc(50% - 30px);
97  background-color: #231f20;
98}
99
100.coffe-medium__exit::before {
101  content: "";
102  width: 50px;
103  height: 20px;
104  border-radius: 0 0 50% 50%;
105  position: absolute;
106  bottom: -20px;
107  left: calc(50% - 25px);
108  background-color: #231f20;
109}
110
111.coffe-medium__exit::after {
112  content: "";
113  width: 10px;
114  height: 10px;
115  position: absolute;
116  bottom: -30px;
117  left: calc(50% - 5px);
118  background-color: #231f20;
119}
120
121.coffee-medium__arm {
122  width: 70px;
123  height: 20px;
124  position: absolute;
125  top: 15px;
126  right: 25px;
127  background-color: #231f20;
128}
129
130.coffee-medium__arm::before {
131  content: "";
132  width: 15px;
133  height: 5px;
134  position: absolute;
135  top: 7px;
136  left: -15px;
137  background-color: #9e9495;
138}
139
140.coffee-medium__cup {
141  width: 80px;
142  height: 47px;
143  position: absolute;
144  bottom: 0;
145  left: calc(50% - 40px);
146  background-color: #FFF;
147  border-radius: 0 0 70px 70px / 0 0 110px 110px;
148}
149
150.coffee-medium__cup::after {
151  content: "";
152  width: 20px;
153  height: 20px;
154  position: absolute;
155  top: 6px;
156  right: -13px;
157  border: 5px solid #FFF;
158  border-radius: 50%;
159}
160
161@keyframes liquid {
162  0% {
163    height: 0px;
164    opacity: 1;
165  }
166
167  5% {
168    height: 0px;
169    opacity: 1;
170  }
171
172  20% {
173    height: 62px;
174    opacity: 1;
175  }
176
177  95% {
178    height: 62px;
179    opacity: 1;
180  }
181
182  100% {
183    height: 62px;
184    opacity: 0;
185  }
186}
187
188.coffee-medium__liquid {
189  width: 6px;
190  height: 63px;
191  opacity: 0;
192  position: absolute;
193  top: 50px;
194  left: calc(50% - 3px);
195  background-color: #74372b;
196  animation: liquid 4s 4s linear infinite;
197}
198
199.coffee-medium__smoke {
200  width: 8px;
201  height: 20px;
202  position: absolute;
203  border-radius: 5px;
204  background-color: #b3aeae;
205}
206
207@keyframes smokeOne {
208  0% {
209    bottom: 20px;
210    opacity: 0;
211  }
212
213  40% {
214    bottom: 50px;
215    opacity: .5;
216  }
217
218  80% {
219    bottom: 80px;
220    opacity: .3;
221  }
222
223  100% {
224    bottom: 80px;
225    opacity: 0;
226  }
227}
228
229@keyframes smokeTwo {
230  0% {
231    bottom: 40px;
232    opacity: 0;
233  }
234
235  40% {
236    bottom: 70px;
237    opacity: .5;
238  }
239
240  80% {
241    bottom: 80px;
242    opacity: .3;
243  }
244
245  100% {
246    bottom: 80px;
247    opacity: 0;
248  }
249}
250
251.coffee-medium__smoke-one {
252  opacity: 0;
253  bottom: 50px;
254  left: 102px;
255  animation: smokeOne 3s 4s linear infinite;
256}
257
258.coffee-medium__smoke-two {
259  opacity: 0;
260  bottom: 70px;
261  left: 118px;
262  animation: smokeTwo 3s 5s linear infinite;
263}
264
265.coffee-medium__smoke-three {
266  opacity: 0;
267  bottom: 65px;
268  right: 118px;
269  animation: smokeTwo 3s 6s linear infinite;
270}
271
272.coffee-medium__smoke-for {
273  opacity: 0;
274  bottom: 50px;
275  right: 102px;
276  animation: smokeOne 3s 5s linear infinite;
277}
278
279.coffee-footer {
280  width: 95%;
281  height: 15px;
282  position: absolute;
283  bottom: 25px;
284  left: calc(50% - 47.5%);
285  background-color: #41bdad;
286  border-radius: 10px;
287}
288
289.coffee-footer::after {
290  content: "";
291  width: 106%;
292  height: 26px;
293  position: absolute;
294  bottom: -25px;
295  left: -8px;
296  background-color: #000;
297}
298 
299}

.loader {
}

.container {
  width: 300px;
  height: 280px;
  position: absolute;
  top: calc(50% - 140px);
  left: calc(50% - 150px);
}

.coffee-header {
  width: 100%;
  height: 80px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ddcfcc;
  border-radius: 10px;
}

.coffee-header__buttons {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 25px;
  background-color: #282323;
  border-radius: 50%;
}

.coffee-header__buttons::after {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  bottom: -8px;
  left: calc(50% - 4px);
  background-color: #615e5e;
}

.coffee-header__button-one {
  left: 15px;
}

.coffee-header__button-two {
  left: 50px;
}

.coffee-header__display {
  width: 50px;
  height: 50px;
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
  border-radius: 50%;
  background-color: #9acfc5;
  border: 5px solid #43beae;
  box-sizing: border-box;
}

.coffee-header__details {
  width: 8px;
  height: 20px;
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #9b9091;
  box-shadow: -12px 0 0 #9b9091, -24px 0 0 #9b9091;
}

.coffee-medium {
  width: 90%;
  height: 160px;
  position: absolute;
  top: 80px;
  left: calc(50% - 45%);
  background-color: #bcb0af;
}

.coffee-medium:before {
  content: "";
  width: 90%;
  height: 100px;
  background-color: #776f6e;
  position: absolute;
  bottom: 0;
  left: calc(50% - 45%);
  border-radius: 20px 20px 0 0;
}

.coffe-medium__exit {
  width: 60px;
  height: 20px;
  position: absolute;
  top: 0;
  left: calc(50% - 30px);
  background-color: #231f20;
}

.coffe-medium__exit::before {
  content: "";
  width: 50px;
  height: 20px;
  border-radius: 0 0 50% 50%;
  position: absolute;
  bottom: -20px;
  left: calc(50% - 25px);
  background-color: #231f20;
}

.coffe-medium__exit::after {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  bottom: -30px;
  left: calc(50% - 5px);
  background-color: #231f20;
}

.coffee-medium__arm {
  width: 70px;
  height: 20px;
  position: absolute;
  top: 15px;
  right: 25px;
  background-color: #231f20;
}

.coffee-medium__arm::before {
  content: "";
  width: 15px;
  height: 5px;
  position: absolute;
  top: 7px;
  left: -15px;
  background-color: #9e9495;
}

.coffee-medium__cup {
  width: 80px;
  height: 47px;
  position: absolute;
  bottom: 0;
  left: calc(50% - 40px);
  background-color: #FFF;
  border-radius: 0 0 70px 70px / 0 0 110px 110px;
}

.coffee-medium__cup::after {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  top: 6px;
  right: -13px;
  border: 5px solid #FFF;
  border-radius: 50%;
}

@keyframes liquid {
  0% {
    height: 0px;
    opacity: 1;
  }

  5% {
    height: 0px;
    opacity: 1;
  }

  20% {
    height: 62px;
    opacity: 1;
  }

  95% {
    height: 62px;
    opacity: 1;
  }

  100% {
    height: 62px;
    opacity: 0;
  }
}

.coffee-medium__liquid {
  width: 6px;
  height: 63px;
  opacity: 0;
  position: absolute;
  top: 50px;
  left: calc(50% - 3px);
  background-color: #74372b;
  animation: liquid 4s 4s linear infinite;
}

.coffee-medium__smoke {
  width: 8px;
  height: 20px;
  position: absolute;
  border-radius: 5px;
  background-color: #b3aeae;
}

@keyframes smokeOne {
  0% {
    bottom: 20px;
    opacity: 0;
  }

  40% {
    bottom: 50px;
    opacity: .5;
  }

  80% {
    bottom: 80px;
    opacity: .3;
  }

  100% {
    bottom: 80px;
    opacity: 0;
  }
}

@keyframes smokeTwo {
  0% {
    bottom: 40px;
    opacity: 0;
  }

  40% {
    bottom: 70px;
    opacity: .5;
  }

  80% {
    bottom: 80px;
    opacity: .3;
  }

  100% {
    bottom: 80px;
    opacity: 0;
  }
}

.coffee-medium__smoke-one {
  opacity: 0;
  bottom: 50px;
  left: 102px;
  animation: smokeOne 3s 4s linear infinite;
}

.coffee-medium__smoke-two {
  opacity: 0;
  bottom: 70px;
  left: 118px;
  animation: smokeTwo 3s 5s linear infinite;
}

.coffee-medium__smoke-three {
  opacity: 0;
  bottom: 65px;
  right: 118px;
  animation: smokeTwo 3s 6s linear infinite;
}

.coffee-medium__smoke-for {
  opacity: 0;
  bottom: 50px;
  right: 102px;
  animation: smokeOne 3s 5s linear infinite;
}

.coffee-footer {
  width: 95%;
  height: 15px;
  position: absolute;
  bottom: 25px;
  left: calc(50% - 47.5%);
  background-color: #41bdad;
  border-radius: 10px;
}

.coffee-footer::after {
  content: "";
  width: 106%;
  height: 26px;
  position: absolute;
  bottom: -25px;
  left: -8px;
  background-color: #000;
}
 
}

Toggle prefixes

838 views

Comments

isfan4ik 30. September at 10:51

30. September at 10:51

it's my i'm doing

vnuny 27. September at 15:18

27. September at 15:18

It's not yours, you stole it :(

No variations yet

MIT License

Copyright - 2023 isfan4ik  

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.