Loader by StealthWorm

#212121

1.loader {
2  display: flex;
3  width: 8rem;
4  height: 8rem;
5  justify-items: center;
6  justify-content: center;
7  align-items: center;
8}
9
10.head {
11  width: 100%;
12  height: 100%;
13  background-color: #FA95FB;
14  border-radius: 50%;
15  animation: move 3s linear infinite;
16  box-shadow: 0 1rem 1rem #E220B8;
17  filter: blur(.3rem);
18  z-index: 1;
19}
20
21.eye {
22  display: flex;
23  position: absolute;
24  width: 4rem;
25  height: 4rem;
26  background-color: #EFFFC8;
27  border-radius: 50%;
28  align-items: center;
29  justify-content: center;
30  z-index: 2;
31  box-shadow: 0 0 1rem #F752F7;
32  animation: move 5s alternate infinite;
33}
34
35.eye::before {
36  content: "";
37  display: flex;
38  width: 1rem;
39  height: 2rem;
40  background-color: #000;
41  border-radius: 50%;
42  animation: blink 4s ease-in-out alternate infinite;
43}
44
45.flames {
46  display: flex;
47  position: absolute;
48  z-index: 0;
49}
50
51.particle {
52  display: flex;
53  position: absolute;
54  background-color: #FA95FB;
55  border-radius: 50%;
56  filter: blur(.3rem);
57  border-top: 5px solid #E220B8;
58  border-left: 5px solid #E220B8;
59}
60
61.flames::before {
62  content: "";
63  position: absolute;
64  width: 8rem;
65  height: 8rem;
66  background: #f865d8;
67  filter: blur(5rem);
68  opacity: 0.5;
69  border-radius: 50%;
70  top: -8rem;
71  left: -4rem;
72  z-index: 4;
73  animation: pulse 3s linear infinite;
74}
75
76.particle:nth-child(1) {
77  width: 4rem;
78  height: 4rem;
79  top: -6rem;
80  animation: move 7s alternate-reverse infinite;
81}
82
83.particle:nth-child(2) {
84  width: 1.5rem;
85  height: 1.5rem;
86  top: -8rem;
87  left: -5rem;
88  animation: move 1.5s  ease-in-out reverse infinite;
89}
90
91.particle:nth-child(3) {
92  width: 4rem;
93  height: 4rem;
94  top: -5rem;
95  left: -4rem;
96  animation: move 8s alternate-reverse infinite;
97}
98
99.particle:nth-child(4) {
100  width: 3rem;
101  height: 3rem;
102  top: -7.5rem;
103  animation: move 4s alternate-reverse infinite;
104}
105
106.particle:nth-child(5) {
107  width: 2rem;
108  height: 2rem;
109  top: -9rem;
110  left: 1rem;
111  animation: move 2.5s alternate-reverse infinite;
112}
113
114.particle:nth-child(6) {
115  width: 2rem;
116  height: 2rem;
117  top: -6.8rem;
118  left: -1.5rem;
119  animation: move 5s alternate-reverse infinite;
120}
121
122.particle:nth-child(7) {
123  width: 1rem;
124  height: 1rem;
125  top: -10rem;
126  left: -1rem;
127  animation: move 1.2s alternate-reverse infinite;
128}
129
130.particle:nth-child(8) {
131  width: 1.3rem;
132  height: 1.3rem;
133  top: -7.5rem;
134  left: -2rem;
135  animation: move 2.5s alternate-reverse infinite;
136}
137
138@keyframes move {
139  0% {
140    transform: translate(0, 0);
141  }
142
143  50% {
144    transform: translate(4px, 6px);
145  }
146
147  100% {
148    transform: translate(0, 0);
149  }
150}
151
152@keyframes blink {
153  20% {
154    transform: translate(0, 0);
155    height: 2rem;
156  }
157
158  30% {
159    height: 0;
160  }
161
162  40% {
163    transform: translate(5px, 10px);
164    height: 0;
165  }
166
167  50% {
168    height: 2rem;
169  }
170
171  70% {
172    transform: translate(-10px, -10px);
173  }
174
175  90% {
176    transform: translate(0, 0);
177  }
178}
179
180@keyframes pulse {
181  0% {
182    opacity: 0.5;
183  }
184
185  50% {
186    opacity: 1;
187  }
188
189  100% {
190    opacity: 0.5;
191  }
192}
193

.loader {
  display: flex;
  width: 8rem;
  height: 8rem;
  justify-items: center;
  justify-content: center;
  align-items: center;
}

.head {
  width: 100%;
  height: 100%;
  background-color: #FA95FB;
  border-radius: 50%;
  animation: move 3s linear infinite;
  box-shadow: 0 1rem 1rem #E220B8;
  filter: blur(.3rem);
  z-index: 1;
}

.eye {
  display: flex;
  position: absolute;
  width: 4rem;
  height: 4rem;
  background-color: #EFFFC8;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 0 1rem #F752F7;
  animation: move 5s alternate infinite;
}

.eye::before {
  content: "";
  display: flex;
  width: 1rem;
  height: 2rem;
  background-color: #000;
  border-radius: 50%;
  animation: blink 4s ease-in-out alternate infinite;
}

.flames {
  display: flex;
  position: absolute;
  z-index: 0;
}

.particle {
  display: flex;
  position: absolute;
  background-color: #FA95FB;
  border-radius: 50%;
  filter: blur(.3rem);
  border-top: 5px solid #E220B8;
  border-left: 5px solid #E220B8;
}

.flames::before {
  content: "";
  position: absolute;
  width: 8rem;
  height: 8rem;
  background: #f865d8;
  filter: blur(5rem);
  opacity: 0.5;
  border-radius: 50%;
  top: -8rem;
  left: -4rem;
  z-index: 4;
  animation: pulse 3s linear infinite;
}

.particle:nth-child(1) {
  width: 4rem;
  height: 4rem;
  top: -6rem;
  animation: move 7s alternate-reverse infinite;
}

.particle:nth-child(2) {
  width: 1.5rem;
  height: 1.5rem;
  top: -8rem;
  left: -5rem;
  animation: move 1.5s  ease-in-out reverse infinite;
}

.particle:nth-child(3) {
  width: 4rem;
  height: 4rem;
  top: -5rem;
  left: -4rem;
  animation: move 8s alternate-reverse infinite;
}

.particle:nth-child(4) {
  width: 3rem;
  height: 3rem;
  top: -7.5rem;
  animation: move 4s alternate-reverse infinite;
}

.particle:nth-child(5) {
  width: 2rem;
  height: 2rem;
  top: -9rem;
  left: 1rem;
  animation: move 2.5s alternate-reverse infinite;
}

.particle:nth-child(6) {
  width: 2rem;
  height: 2rem;
  top: -6.8rem;
  left: -1.5rem;
  animation: move 5s alternate-reverse infinite;
}

.particle:nth-child(7) {
  width: 1rem;
  height: 1rem;
  top: -10rem;
  left: -1rem;
  animation: move 1.2s alternate-reverse infinite;
}

.particle:nth-child(8) {
  width: 1.3rem;
  height: 1.3rem;
  top: -7.5rem;
  left: -2rem;
  animation: move 2.5s alternate-reverse infinite;
}

@keyframes move {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(4px, 6px);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes blink {
  20% {
    transform: translate(0, 0);
    height: 2rem;
  }

  30% {
    height: 0;
  }

  40% {
    transform: translate(5px, 10px);
    height: 0;
  }

  50% {
    height: 2rem;
  }

  70% {
    transform: translate(-10px, -10px);
  }

  90% {
    transform: translate(0, 0);
  }
}

@keyframes pulse {
  0% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.5;
  }
}

Toggle prefixes

828 views

Copy to Figma

828 views

Comments

Variations

Get code

Link to post

MIT License

Copyright - 2024 StealthWorm (thierry) 

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.