Loader by Admin12121

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