Loader by SouravBandyopadhyay

1.cssload-main {
2  position: absolute;
3  content: '';
4  left: 50%;
5  transform: translate(-100%, -240%);
6  -o-transform: translate(-100%, -240%);
7  -ms-transform: translate(-100%, -240%);
8  -webkit-transform: translate(-100%, -240%);
9  -moz-transform: translate(-100%, -240%);
10}
11
12.cssload-main * {
13  font-size: 62px;
14}
15
16.cssload-heart {
17  animation: cssload-heart 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
18  -o-animation: cssload-heart 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
19  -ms-animation: cssload-heart 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
20  -webkit-animation: cssload-heart 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
21  -moz-animation: cssload-heart 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
22  top: 50%;
23  content: '';
24  left: 50%;
25  position: absolute;
26}
27
28.cssload-heartL {
29  width: 1em;
30  height: 1em;
31  border: 1px solid rgb(252, 0, 101);
32  background-color: rgb(252, 0, 101);
33  content: '';
34  position: absolute;
35  display: block;
36  border-radius: 100%;
37  animation: cssload-heartL 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
38  -o-animation: cssload-heartL 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
39  -ms-animation: cssload-heartL 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
40  -webkit-animation: cssload-heartL 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
41  -moz-animation: cssload-heartL 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
42  transform: translate(-28px, -27px);
43  -o-transform: translate(-28px, -27px);
44  -ms-transform: translate(-28px, -27px);
45  -webkit-transform: translate(-28px, -27px);
46  -moz-transform: translate(-28px, -27px);
47}
48
49.cssload-heartR {
50  width: 1em;
51  height: 1em;
52  border: 1px solid rgb(252, 0, 101);
53  background-color: rgb(252, 0, 101);
54  content: '';
55  position: absolute;
56  display: block;
57  border-radius: 100%;
58  transform: translate(28px, -27px);
59  -o-transform: translate(28px, -27px);
60  -ms-transform: translate(28px, -27px);
61  -webkit-transform: translate(28px, -27px);
62  -moz-transform: translate(28px, -27px);
63  animation: cssload-heartR 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
64  -o-animation: cssload-heartR 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
65  -ms-animation: cssload-heartR 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
66  -webkit-animation: cssload-heartR 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
67  -moz-animation: cssload-heartR 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
68}
69
70.cssload-square {
71  width: 1em;
72  height: 1em;
73  border: 1px solid rgb(252, 0, 101);
74  background-color: rgb(252, 0, 101);
75  position: relative;
76  display: block;
77  content: '';
78  transform: scale(1) rotate(-45deg);
79  -o-transform: scale(1) rotate(-45deg);
80  -ms-transform: scale(1) rotate(-45deg);
81  -webkit-transform: scale(1) rotate(-45deg);
82  -moz-transform: scale(1) rotate(-45deg);
83  animation: cssload-square 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
84  -o-animation: cssload-square 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
85  -ms-animation: cssload-square 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
86  -webkit-animation: cssload-square 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
87  -moz-animation: cssload-square 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
88}
89
90.cssload-shadow {
91  top: 97px;
92  left: 50%;
93  content: '';
94  position: relative;
95  display: block;
96  bottom: -.5em;
97  width: 1em;
98  height: .24em;
99  background-color: rgb(215,215,215);
100  border: 1px solid rgb(215,215,215);
101  border-radius: 50%;
102  animation: cssload-shadow 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
103  -o-animation: cssload-shadow 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
104  -ms-animation: cssload-shadow 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
105  -webkit-animation: cssload-shadow 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
106  -moz-animation: cssload-shadow 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
107}
108
109@keyframes cssload-square {
110  50% {
111    border-radius: 100%;
112    transform: scale(0.5) rotate(-45deg);
113  }
114
115  100% {
116    transform: scale(1) rotate(-45deg);
117  }
118}
119
120@-o-keyframes cssload-square {
121  50% {
122    border-radius: 100%;
123    -o-transform: scale(0.5) rotate(-45deg);
124  }
125
126  100% {
127    -o-transform: scale(1) rotate(-45deg);
128  }
129}
130
131@-ms-keyframes cssload-square {
132  50% {
133    border-radius: 100%;
134    -ms-transform: scale(0.5) rotate(-45deg);
135  }
136
137  100% {
138    -ms-transform: scale(1) rotate(-45deg);
139  }
140}
141
142@-webkit-keyframes cssload-square {
143  50% {
144    border-radius: 100%;
145    -webkit-transform: scale(0.5) rotate(-45deg);
146  }
147
148  100% {
149    -webkit-transform: scale(1) rotate(-45deg);
150  }
151}
152
153@-moz-keyframes cssload-square {
154  50% {
155    border-radius: 100%;
156    -moz-transform: scale(0.5) rotate(-45deg);
157  }
158
159  100% {
160    -moz-transform: scale(1) rotate(-45deg);
161  }
162}
163
164@keyframes cssload-heart {
165  50% {
166    transform: rotate(360deg);
167  }
168
169  100% {
170    transform: rotate(720deg);
171  }
172}
173
174@-o-keyframes cssload-heart {
175  50% {
176    -o-transform: rotate(360deg);
177  }
178
179  100% {
180    -o-transform: rotate(720deg);
181  }
182}
183
184@-ms-keyframes cssload-heart {
185  50% {
186    -ms-transform: rotate(360deg);
187  }
188
189  100% {
190    -ms-transform: rotate(720deg);
191  }
192}
193
194@-webkit-keyframes cssload-heart {
195  50% {
196    -webkit-transform: rotate(360deg);
197  }
198
199  100% {
200    -webkit-transform: rotate(720deg);
201  }
202}
203
204@-moz-keyframes cssload-heart {
205  50% {
206    -moz-transform: rotate(360deg);
207  }
208
209  100% {
210    -moz-transform: rotate(720deg);
211  }
212}
213
214@keyframes cssload-heartL {
215  60% {
216    transform: scale(0.4);
217  }
218}
219
220@-o-keyframes cssload-heartL {
221  60% {
222    -o-transform: scale(0.4);
223  }
224}
225
226@-ms-keyframes cssload-heartL {
227  60% {
228    -ms-transform: scale(0.4);
229  }
230}
231
232@-webkit-keyframes cssload-heartL {
233  60% {
234    -webkit-transform: scale(0.4);
235  }
236}
237
238@-moz-keyframes cssload-heartL {
239  60% {
240    -moz-transform: scale(0.4);
241  }
242}
243
244@keyframes cssload-heartR {
245  40% {
246    transform: scale(0.4);
247  }
248}
249
250@-o-keyframes cssload-heartR {
251  40% {
252    -o-transform: scale(0.4);
253  }
254}
255
256@-ms-keyframes cssload-heartR {
257  40% {
258    -ms-transform: scale(0.4);
259  }
260}
261
262@-webkit-keyframes cssload-heartR {
263  40% {
264    -webkit-transform: scale(0.4);
265  }
266}
267
268@-moz-keyframes cssload-heartR {
269  40% {
270    -moz-transform: scale(0.4);
271  }
272}
273
274@keyframes cssload-shadow {
275  50% {
276    transform: scale(0.5);
277    border-color: rgb(228,228,228);
278  }
279}
280
281@-o-keyframes cssload-shadow {
282  50% {
283    -o-transform: scale(0.5);
284    border-color: rgb(228,228,228);
285  }
286}
287
288@-ms-keyframes cssload-shadow {
289  50% {
290    -ms-transform: scale(0.5);
291    border-color: rgb(228,228,228);
292  }
293}
294
295@-webkit-keyframes cssload-shadow {
296  50% {
297    -webkit-transform: scale(0.5);
298    border-color: rgb(228,228,228);
299  }
300}
301
302@-moz-keyframes cssload-shadow {
303  50% {
304    -moz-transform: scale(0.5);
305    border-color: rgb(228,228,228);
306  }
307}