Loader by S3nouy

1body {
2  margin: 0;
3  padding: 0;
4  height: 100px;
5  display: flex;
6  align-items: center;
7  justify-content: center;
8  background-color: #000006;
9}
10
11.fire {
12  position: absolute;
13  top: calc(50% - 25px);
14  left: calc(50% - 25px);
15  width: 50px;
16  height: 50px;
17  background-color: transparent;
18  margin-left: auto;
19  margin-right: auto;
20}
21@keyframes scaleUpDown {
22  0%,
23  100% {
24    transform: scaleY(1) scaleX(1);
25  }
26
27  50%,
28  90% {
29    transform: scaleY(1.1);
30  }
31
32  75% {
33    transform: scaleY(0.95);
34  }
35
36  80% {
37    transform: scaleX(0.95);
38  }
39}
40
41@keyframes shake {
42  0%,
43  100% {
44    transform: skewX(0) scale(1);
45  }
46
47  50% {
48    transform: skewX(5deg) scale(0.9);
49  }
50}
51
52@keyframes particleUp {
53  0% {
54    opacity: 0;
55  }
56
57  20% {
58    opacity: 1;
59  }
60
61  80% {
62    opacity: 1;
63  }
64
65  100% {
66    opacity: 0;
67    top: -100%;
68    transform: scale(0.5);
69  }
70}
71
72@keyframes glow {
73  0%,
74  100% {
75    background-color: #3cff1e;
76  }
77
78  50% {
79    background-color: #3cff1e;
80  }
81}
82
83.fire {
84  position: absolute;
85  top: calc(50% - 25px);
86  left: calc(50% - 25px);
87  width: 50px; /* Reduced size by 50% */
88  height: 50px; /* Reduced size by 50% */
89  background-color: transparent;
90  margin-left: auto;
91  margin-right: auto;
92}
93
94.fire-center {
95  position: absolute;
96  height: 100%;
97  width: 100%;
98  animation: scaleUpDown 3s ease-out;
99  animation-iteration-count: infinite;
100  animation-fill-mode: both;
101}
102
103.fire-center .main-fire {
104  position: absolute;
105  width: 100%;
106  height: 100%;
107  background-image: radial-gradient(
108    farthest-corner at 10px 0,
109    #3cff1e 0%,
110    #3cff1e 95%
111  );
112  transform: scaleX(0.8) rotate(45deg);
113  border-radius: 0 40% 60% 40%;
114  filter: drop-shadow(0 0 10px #3cff1e);
115}
116
117.fire-center .particle-fire {
118  position: absolute;
119  top: 60%;
120  left: 45%;
121  width: 10px;
122  height: 10px;
123  background-color: #3cff1e;
124  border-radius: 50%;
125  filter: drop-shadow(0 0 10px #d43322);
126  animation: particleUp 2s ease-out 0;
127  animation-iteration-count: infinite;
128  animation-fill-mode: both;
129}
130
131.fire-right {
132  height: 100%;
133  width: 100%;
134  position: absolute;
135  animation: shake 2s ease-out 0;
136  animation-iteration-count: infinite;
137  animation-fill-mode: both;
138}
139
140.fire-right .main-fire {
141  position: absolute;
142  top: 15%;
143  right: -25%;
144  width: 80%;
145  height: 80%;
146  background-color: #3cff1e;
147  transform: scaleX(0.8) rotate(45deg);
148  border-radius: 0 40% 60% 40%;
149  filter: drop-shadow(0 0 10px #3cff1e);
150}
151
152.fire-right .particle-fire {
153  position: absolute;
154  top: 45%;
155  left: 50%;
156  width: 15px;
157  height: 15px;
158  background-color: #3cff1e;
159  transform: scaleX(0.8) rotate(45deg);
160  border-radius: 50%;
161  filter: drop-shadow(0 0 10px #3cff1e);
162  animation: particleUp 2s ease-out 0;
163  animation-iteration-count: infinite;
164  animation-fill-mode: both;
165}
166
167.fire-left {
168  position: absolute;
169  height: 100%;
170  width: 100%;
171  animation: shake 3s ease-out 0;
172  animation-iteration-count: infinite;
173  animation-fill-mode: both;
174}
175
176.fire-left .main-fire {
177  position: absolute;
178  top: 15%;
179  left: -20%;
180  width: 80%;
181  height: 80%;
182  background-color: #3cff1e;
183  transform: scaleX(0.8) rotate(45deg);
184  border-radius: 0 40% 60% 40%;
185  filter: drop-shadow(0 0 10px #3cff1e);
186}
187
188.fire-left .particle-fire {
189  position: absolute;
190  top: 10%;
191  left: 20%;
192  width: 10%;
193  height: 10%;
194  background-color: #3cff1e;
195  border-radius: 50%;
196  filter: drop-shadow(0 0 10px #d43322);
197  animation: particleUp 3s infinite ease-out 0;
198  animation-fill-mode: both;
199}
200
201.fire-bottom .main-fire {
202  position: absolute;
203  top: 30%;
204  left: 20%;
205  width: 75%;
206  height: 75%;
207  background-color: #3cff1e;
208  transform: scaleX(0.8) rotate(45deg);
209  border-radius: 0 40% 100% 40%;
210  filter: blur(10px);
211  animation: glow 2s ease-out 0;
212  animation-iteration-count: infinite;
213  animation-fill-mode: both;
214}
215