Loader by Nawsome

Posted by

@Nawsome

Theme:

Dark

#animation#loader#hamster#wheel

#212121

18K views

Add prefixes

1.wheel-and-hamster {
2  --dur: 1s;
3  position: relative;
4  width: 12em;
5  height: 12em;
6  font-size: 14px;
7}
8
9.wheel,
10.hamster,
11.hamster div,
12.spoke {
13  position: absolute;
14}
15
16.wheel,
17.spoke {
18  border-radius: 50%;
19  top: 0;
20  left: 0;
21  width: 100%;
22  height: 100%;
23}
24
25.wheel {
26  background: radial-gradient(100% 100% at center,hsla(0,0%,60%,0) 47.8%,hsl(0,0%,60%) 48%);
27  z-index: 2;
28}
29
30.hamster {
31  animation: hamster var(--dur) ease-in-out infinite;
32  top: 50%;
33  left: calc(50% - 3.5em);
34  width: 7em;
35  height: 3.75em;
36  transform: rotate(4deg) translate(-0.8em,1.85em);
37  transform-origin: 50% 0;
38  z-index: 1;
39}
40
41.hamster__head {
42  animation: hamsterHead var(--dur) ease-in-out infinite;
43  background: hsl(30,90%,55%);
44  border-radius: 70% 30% 0 100% / 40% 25% 25% 60%;
45  box-shadow: 0 -0.25em 0 hsl(30,90%,80%) inset,
46		0.75em -1.55em 0 hsl(30,90%,90%) inset;
47  top: 0;
48  left: -2em;
49  width: 2.75em;
50  height: 2.5em;
51  transform-origin: 100% 50%;
52}
53
54.hamster__ear {
55  animation: hamsterEar var(--dur) ease-in-out infinite;
56  background: hsl(0,90%,85%);
57  border-radius: 50%;
58  box-shadow: -0.25em 0 hsl(30,90%,55%) inset;
59  top: -0.25em;
60  right: -0.25em;
61  width: 0.75em;
62  height: 0.75em;
63  transform-origin: 50% 75%;
64}
65
66.hamster__eye {
67  animation: hamsterEye var(--dur) linear infinite;
68  background-color: hsl(0,0%,0%);
69  border-radius: 50%;
70  top: 0.375em;
71  left: 1.25em;
72  width: 0.5em;
73  height: 0.5em;
74}
75
76.hamster__nose {
77  background: hsl(0,90%,75%);
78  border-radius: 35% 65% 85% 15% / 70% 50% 50% 30%;
79  top: 0.75em;
80  left: 0;
81  width: 0.2em;
82  height: 0.25em;
83}
84
85.hamster__body {
86  animation: hamsterBody var(--dur) ease-in-out infinite;
87  background: hsl(30,90%,90%);
88  border-radius: 50% 30% 50% 30% / 15% 60% 40% 40%;
89  box-shadow: 0.1em 0.75em 0 hsl(30,90%,55%) inset,
90		0.15em -0.5em 0 hsl(30,90%,80%) inset;
91  top: 0.25em;
92  left: 2em;
93  width: 4.5em;
94  height: 3em;
95  transform-origin: 17% 50%;
96  transform-style: preserve-3d;
97}
98
99.hamster__limb--fr,
100.hamster__limb--fl {
101  clip-path: polygon(0 0,100% 0,70% 80%,60% 100%,0% 100%,40% 80%);
102  top: 2em;
103  left: 0.5em;
104  width: 1em;
105  height: 1.5em;
106  transform-origin: 50% 0;
107}
108
109.hamster__limb--fr {
110  animation: hamsterFRLimb var(--dur) linear infinite;
111  background: linear-gradient(hsl(30,90%,80%) 80%,hsl(0,90%,75%) 80%);
112  transform: rotate(15deg) translateZ(-1px);
113}
114
115.hamster__limb--fl {
116  animation: hamsterFLLimb var(--dur) linear infinite;
117  background: linear-gradient(hsl(30,90%,90%) 80%,hsl(0,90%,85%) 80%);
118  transform: rotate(15deg);
119}
120
121.hamster__limb--br,
122.hamster__limb--bl {
123  border-radius: 0.75em 0.75em 0 0;
124  clip-path: polygon(0 0,100% 0,100% 30%,70% 90%,70% 100%,30% 100%,40% 90%,0% 30%);
125  top: 1em;
126  left: 2.8em;
127  width: 1.5em;
128  height: 2.5em;
129  transform-origin: 50% 30%;
130}
131
132.hamster__limb--br {
133  animation: hamsterBRLimb var(--dur) linear infinite;
134  background: linear-gradient(hsl(30,90%,80%) 90%,hsl(0,90%,75%) 90%);
135  transform: rotate(-25deg) translateZ(-1px);
136}
137
138.hamster__limb--bl {
139  animation: hamsterBLLimb var(--dur) linear infinite;
140  background: linear-gradient(hsl(30,90%,90%) 90%,hsl(0,90%,85%) 90%);
141  transform: rotate(-25deg);
142}
143
144.hamster__tail {
145  animation: hamsterTail var(--dur) linear infinite;
146  background: hsl(0,90%,85%);
147  border-radius: 0.25em 50% 50% 0.25em;
148  box-shadow: 0 -0.2em 0 hsl(0,90%,75%) inset;
149  top: 1.5em;
150  right: -0.5em;
151  width: 1em;
152  height: 0.5em;
153  transform: rotate(30deg) translateZ(-1px);
154  transform-origin: 0.25em 0.25em;
155}
156
157.spoke {
158  animation: spoke var(--dur) linear infinite;
159  background: radial-gradient(100% 100% at center,hsl(0,0%,60%) 4.8%,hsla(0,0%,60%,0) 5%),
160		linear-gradient(hsla(0,0%,55%,0) 46.9%,hsl(0,0%,65%) 47% 52.9%,hsla(0,0%,65%,0) 53%) 50% 50% / 99% 99% no-repeat;
161}
162
163/* Animations */
164@keyframes hamster {
165  from, to {
166    transform: rotate(4deg) translate(-0.8em,1.85em);
167  }
168
169  50% {
170    transform: rotate(0) translate(-0.8em,1.85em);
171  }
172}
173
174@keyframes hamsterHead {
175  from, 25%, 50%, 75%, to {
176    transform: rotate(0);
177  }
178
179  12.5%, 37.5%, 62.5%, 87.5% {
180    transform: rotate(8deg);
181  }
182}
183
184@keyframes hamsterEye {
185  from, 90%, to {
186    transform: scaleY(1);
187  }
188
189  95% {
190    transform: scaleY(0);
191  }
192}
193
194@keyframes hamsterEar {
195  from, 25%, 50%, 75%, to {
196    transform: rotate(0);
197  }
198
199  12.5%, 37.5%, 62.5%, 87.5% {
200    transform: rotate(12deg);
201  }
202}
203
204@keyframes hamsterBody {
205  from, 25%, 50%, 75%, to {
206    transform: rotate(0);
207  }
208
209  12.5%, 37.5%, 62.5%, 87.5% {
210    transform: rotate(-2deg);
211  }
212}
213
214@keyframes hamsterFRLimb {
215  from, 25%, 50%, 75%, to {
216    transform: rotate(50deg) translateZ(-1px);
217  }
218
219  12.5%, 37.5%, 62.5%, 87.5% {
220    transform: rotate(-30deg) translateZ(-1px);
221  }
222}
223
224@keyframes hamsterFLLimb {
225  from, 25%, 50%, 75%, to {
226    transform: rotate(-30deg);
227  }
228
229  12.5%, 37.5%, 62.5%, 87.5% {
230    transform: rotate(50deg);
231  }
232}
233
234@keyframes hamsterBRLimb {
235  from, 25%, 50%, 75%, to {
236    transform: rotate(-60deg) translateZ(-1px);
237  }
238
239  12.5%, 37.5%, 62.5%, 87.5% {
240    transform: rotate(20deg) translateZ(-1px);
241  }
242}
243
244@keyframes hamsterBLLimb {
245  from, 25%, 50%, 75%, to {
246    transform: rotate(20deg);
247  }
248
249  12.5%, 37.5%, 62.5%, 87.5% {
250    transform: rotate(-60deg);
251  }
252}
253
254@keyframes hamsterTail {
255  from, 25%, 50%, 75%, to {
256    transform: rotate(30deg) translateZ(-1px);
257  }
258
259  12.5%, 37.5%, 62.5%, 87.5% {
260    transform: rotate(10deg) translateZ(-1px);
261  }
262}
263
264@keyframes spoke {
265  from {
266    transform: rotate(0);
267  }
268
269  to {
270    transform: rotate(-1turn);
271  }
272}

.wheel-and-hamster {
  --dur: 1s;
  position: relative;
  width: 12em;
  height: 12em;
  font-size: 14px;
}

.wheel,
.hamster,
.hamster div,
.spoke {
  position: absolute;
}

.wheel,
.spoke {
  border-radius: 50%;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.wheel {
  background: radial-gradient(100% 100% at center,hsla(0,0%,60%,0) 47.8%,hsl(0,0%,60%) 48%);
  z-index: 2;
}

.hamster {
  animation: hamster var(--dur) ease-in-out infinite;
  top: 50%;
  left: calc(50% - 3.5em);
  width: 7em;
  height: 3.75em;
  transform: rotate(4deg) translate(-0.8em,1.85em);
  transform-origin: 50% 0;
  z-index: 1;
}

.hamster__head {
  animation: hamsterHead var(--dur) ease-in-out infinite;
  background: hsl(30,90%,55%);
  border-radius: 70% 30% 0 100% / 40% 25% 25% 60%;
  box-shadow: 0 -0.25em 0 hsl(30,90%,80%) inset,
		0.75em -1.55em 0 hsl(30,90%,90%) inset;
  top: 0;
  left: -2em;
  width: 2.75em;
  height: 2.5em;
  transform-origin: 100% 50%;
}

.hamster__ear {
  animation: hamsterEar var(--dur) ease-in-out infinite;
  background: hsl(0,90%,85%);
  border-radius: 50%;
  box-shadow: -0.25em 0 hsl(30,90%,55%) inset;
  top: -0.25em;
  right: -0.25em;
  width: 0.75em;
  height: 0.75em;
  transform-origin: 50% 75%;
}

.hamster__eye {
  animation: hamsterEye var(--dur) linear infinite;
  background-color: hsl(0,0%,0%);
  border-radius: 50%;
  top: 0.375em;
  left: 1.25em;
  width: 0.5em;
  height: 0.5em;
}

.hamster__nose {
  background: hsl(0,90%,75%);
  border-radius: 35% 65% 85% 15% / 70% 50% 50% 30%;
  top: 0.75em;
  left: 0;
  width: 0.2em;
  height: 0.25em;
}

.hamster__body {
  animation: hamsterBody var(--dur) ease-in-out infinite;
  background: hsl(30,90%,90%);
  border-radius: 50% 30% 50% 30% / 15% 60% 40% 40%;
  box-shadow: 0.1em 0.75em 0 hsl(30,90%,55%) inset,
		0.15em -0.5em 0 hsl(30,90%,80%) inset;
  top: 0.25em;
  left: 2em;
  width: 4.5em;
  height: 3em;
  transform-origin: 17% 50%;
  transform-style: preserve-3d;
}

.hamster__limb--fr,
.hamster__limb--fl {
  clip-path: polygon(0 0,100% 0,70% 80%,60% 100%,0% 100%,40% 80%);
  top: 2em;
  left: 0.5em;
  width: 1em;
  height: 1.5em;
  transform-origin: 50% 0;
}

.hamster__limb--fr {
  animation: hamsterFRLimb var(--dur) linear infinite;
  background: linear-gradient(hsl(30,90%,80%) 80%,hsl(0,90%,75%) 80%);
  transform: rotate(15deg) translateZ(-1px);
}

.hamster__limb--fl {
  animation: hamsterFLLimb var(--dur) linear infinite;
  background: linear-gradient(hsl(30,90%,90%) 80%,hsl(0,90%,85%) 80%);
  transform: rotate(15deg);
}

.hamster__limb--br,
.hamster__limb--bl {
  border-radius: 0.75em 0.75em 0 0;
  clip-path: polygon(0 0,100% 0,100% 30%,70% 90%,70% 100%,30% 100%,40% 90%,0% 30%);
  top: 1em;
  left: 2.8em;
  width: 1.5em;
  height: 2.5em;
  transform-origin: 50% 30%;
}

.hamster__limb--br {
  animation: hamsterBRLimb var(--dur) linear infinite;
  background: linear-gradient(hsl(30,90%,80%) 90%,hsl(0,90%,75%) 90%);
  transform: rotate(-25deg) translateZ(-1px);
}

.hamster__limb--bl {
  animation: hamsterBLLimb var(--dur) linear infinite;
  background: linear-gradient(hsl(30,90%,90%) 90%,hsl(0,90%,85%) 90%);
  transform: rotate(-25deg);
}

.hamster__tail {
  animation: hamsterTail var(--dur) linear infinite;
  background: hsl(0,90%,85%);
  border-radius: 0.25em 50% 50% 0.25em;
  box-shadow: 0 -0.2em 0 hsl(0,90%,75%) inset;
  top: 1.5em;
  right: -0.5em;
  width: 1em;
  height: 0.5em;
  transform: rotate(30deg) translateZ(-1px);
  transform-origin: 0.25em 0.25em;
}

.spoke {
  animation: spoke var(--dur) linear infinite;
  background: radial-gradient(100% 100% at center,hsl(0,0%,60%) 4.8%,hsla(0,0%,60%,0) 5%),
		linear-gradient(hsla(0,0%,55%,0) 46.9%,hsl(0,0%,65%) 47% 52.9%,hsla(0,0%,65%,0) 53%) 50% 50% / 99% 99% no-repeat;
}

/* Animations */
@keyframes hamster {
  from, to {
    transform: rotate(4deg) translate(-0.8em,1.85em);
  }

  50% {
    transform: rotate(0) translate(-0.8em,1.85em);
  }
}

@keyframes hamsterHead {
  from, 25%, 50%, 75%, to {
    transform: rotate(0);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(8deg);
  }
}

@keyframes hamsterEye {
  from, 90%, to {
    transform: scaleY(1);
  }

  95% {
    transform: scaleY(0);
  }
}

@keyframes hamsterEar {
  from, 25%, 50%, 75%, to {
    transform: rotate(0);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(12deg);
  }
}

@keyframes hamsterBody {
  from, 25%, 50%, 75%, to {
    transform: rotate(0);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(-2deg);
  }
}

@keyframes hamsterFRLimb {
  from, 25%, 50%, 75%, to {
    transform: rotate(50deg) translateZ(-1px);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(-30deg) translateZ(-1px);
  }
}

@keyframes hamsterFLLimb {
  from, 25%, 50%, 75%, to {
    transform: rotate(-30deg);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(50deg);
  }
}

@keyframes hamsterBRLimb {
  from, 25%, 50%, 75%, to {
    transform: rotate(-60deg) translateZ(-1px);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(20deg) translateZ(-1px);
  }
}

@keyframes hamsterBLLimb {
  from, 25%, 50%, 75%, to {
    transform: rotate(20deg);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(-60deg);
  }
}

@keyframes hamsterTail {
  from, 25%, 50%, 75%, to {
    transform: rotate(30deg) translateZ(-1px);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(10deg) translateZ(-1px);
  }
}

@keyframes spoke {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(-1turn);
  }
}

Nawsome

MIT License

Copyright - 2023 Nawsome  

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.