Superman Loading Animation

This component demonstrates a Superman-style speed loading animation using only HTML and CSS, featuring:

Dynamic speed-line effects
Continuous vibration motion
Pure CSS shapes (no images)
Smooth keyframe-based animations
Eye-catching loader for redirects and loading screens

Code

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <meta charset="UTF-8">
6  <title>Superman Loading Animation | CodewithLord</title>
7  <link rel="stylesheet" href="https://public.codepenassets.com/css/normalize-5.0.0.min.css">
8  <link rel="stylesheet" href="./style.css">
9  <script src="https://public.codepenassets.com/js/prefixfree-1.0.7.min.js"></script>
10</head>
11
12<body>
13  <div class='body'>
14    <span>
15      <span></span>
16      <span></span>
17      <span></span>
18      <span></span>
19    </span>
20    <div class='base'>
21      <span></span>
22      <div class='face'></div>
23    </div>
24  </div>
25  <div class='longfazers'>
26    <span></span>
27    <span></span>
28    <span></span>
29    <span></span>
30  </div>
31  <h1>Redirecting</h1>
32  <script src="./script.js"></script>
33
34</body>
35</html>

CSS Code

1@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
2
3body {
4  background-color: #f1c40f;
5  overflow: hidden;
6}
7
8h1 {
9  position: absolute;
10  font-family: "Open Sans";
11  font-weight: 600;
12  font-size: 12px;
13  text-transform: uppercase;
14  left: 50%;
15  top: 58%;
16  margin-left: -20px;
17}
18
19.body {
20  position: absolute;
21  top: 50%;
22  margin-left: -50px;
23  left: 50%;
24  animation: speeder 0.4s linear infinite;
25}
26
27.body>span {
28  height: 5px;
29  width: 35px;
30  background: #000;
31  position: absolute;
32  top: -19px;
33  left: 60px;
34  border-radius: 2px 10px 1px 0;
35}
36
37.base span {
38  position: absolute;
39  width: 0;
40  height: 0;
41  border-top: 6px solid transparent;
42  border-right: 100px solid #000;
43  border-bottom: 6px solid transparent;
44}
45
46.base span:before {
47  content: "";
48  height: 22px;
49  width: 22px;
50  border-radius: 50%;
51  background: #000;
52  position: absolute;
53  right: -110px;
54  top: -16px;
55}
56
57.base span:after {
58  content: "";
59  position: absolute;
60  width: 0;
61  height: 0;
62  border-top: 0 solid transparent;
63  border-right: 55px solid #000;
64  border-bottom: 16px solid transparent;
65  top: -16px;
66  right: -98px;
67}
68
69.face {
70  position: absolute;
71  height: 12px;
72  width: 20px;
73  background: #000;
74  border-radius: 20px 20px 0 0;
75  transform: rotate(-40deg);
76  right: -125px;
77  top: -15px;
78}
79
80.face:after {
81  content: "";
82  height: 12px;
83  width: 12px;
84  background: #000;
85  right: 4px;
86  top: 7px;
87  position: absolute;
88  transform: rotate(40deg);
89  transform-origin: 50% 50%;
90  border-radius: 0 0 0 2px;
91}
92
93.body>span>span:nth-child(1),
94.body>span>span:nth-child(2),
95.body>span>span:nth-child(3),
96.body>span>span:nth-child(4) {
97  width: 30px;
98  height: 1px;
99  background: #000;
100  position: absolute;
101  animation: fazer1 0.2s linear infinite;
102}
103
104.body>span>span:nth-child(2) {
105  top: 3px;
106  animation: fazer2 0.4s linear infinite;
107}
108
109.body>span>span:nth-child(3) {
110  top: 1px;
111  animation: fazer3 0.4s linear infinite;
112  animation-delay: -1s;
113}
114
115.body>span>span:nth-child(4) {
116  top: 4px;
117  animation: fazer4 1s linear infinite;
118  animation-delay: -1s;
119}
120
121@keyframes fazer1 {
122  0% {
123    left: 0;
124  }
125
126  100% {
127    left: -80px;
128    opacity: 0;
129  }
130}
131
132@keyframes fazer2 {
133  0% {
134    left: 0;
135  }
136
137  100% {
138    left: -100px;
139    opacity: 0;
140  }
141}
142
143@keyframes fazer3 {
144  0% {
145    left: 0;
146  }
147
148  100% {
149    left: -50px;
150    opacity: 0;
151  }
152}
153
154@keyframes fazer4 {
155  0% {
156    left: 0;
157  }
158
159  100% {
160    left: -150px;
161    opacity: 0;
162  }
163}
164
165@keyframes speeder {
166  0% {
167    transform: translate(2px, 1px) rotate(0deg);
168  }
169
170  10% {
171    transform: translate(-1px, -3px) rotate(-1deg);
172  }
173
174  20% {
175    transform: translate(-2px, 0px) rotate(1deg);
176  }
177
178  30% {
179    transform: translate(1px, 2px) rotate(0deg);
180  }
181
182  40% {
183    transform: translate(1px, -1px) rotate(1deg);
184  }
185
186  50% {
187    transform: translate(-1px, 3px) rotate(-1deg);
188  }
189
190  60% {
191    transform: translate(-1px, 1px) rotate(0deg);
192  }
193
194  70% {
195    transform: translate(3px, 1px) rotate(-1deg);
196  }
197
198  80% {
199    transform: translate(-2px, -1px) rotate(1deg);
200  }
201
202  90% {
203    transform: translate(2px, 1px) rotate(0deg);
204  }
205
206  100% {
207    transform: translate(1px, -2px) rotate(-1deg);
208  }
209}
210
211.longfazers {
212  position: absolute;
213  width: 100%;
214  height: 100%;
215}
216
217.longfazers span {
218  position: absolute;
219  height: 2px;
220  width: 20%;
221  background: #000;
222}
223
224.longfazers span:nth-child(1) {
225  top: 20%;
226  animation: lf 0.6s linear infinite;
227  animation-delay: -5s;
228}
229
230.longfazers span:nth-child(2) {
231  top: 40%;
232  animation: lf2 0.8s linear infinite;
233  animation-delay: -1s;
234}
235
236.longfazers span:nth-child(3) {
237  top: 60%;
238  animation: lf3 0.6s linear infinite;
239}
240
241.longfazers span:nth-child(4) {
242  top: 80%;
243  animation: lf4 0.5s linear infinite;
244  animation-delay: -3s;
245}
246
247@keyframes lf {
248  0% {
249    left: 200%;
250  }
251
252  100% {
253    left: -200%;
254    opacity: 0;
255  }
256}
257
258@keyframes lf2 {
259  0% {
260    left: 200%;
261  }
262
263  100% {
264    left: -200%;
265    opacity: 0;
266  }
267}
268
269@keyframes lf3 {
270  0% {
271    left: 200%;
272  }
273
274  100% {
275    left: -100%;
276    opacity: 0;
277  }
278}
279
280@keyframes lf4 {
281  0% {
282    left: 200%;
283  }
284
285  100% {
286    left: -100%;
287    opacity: 0;
288  }
289}

Explanation of the Code

HTML & CSS

Minimal HTML structure with layered elements.

Google Font Open Sans for clean typography.

No images used — entire animation is CSS-based.

Loader Structure

.body represents the Superman silhouette.

.base and .face form the head and body using CSS borders.

Pseudo-elements add fine visual details.

Speed & Motion Effects

speeder animation simulates vibration at high speed.

Multiple fazer keyframes create motion streaks.

Continuous loop ensures smooth loading animation.

Background Speed Lines

.longfazers adds fast-moving horizontal streaks.

Different animation delays create depth and realism.

Performance & Use Cases

Lightweight, no JavaScript required.

Ideal for loading screens, redirect pages, and hero animations.

Works smoothly across modern browsers.

Superman Loading Animation using Pure CSS

Superman Loading Animation

Code

CSS Code

Explanation of the Code

HTML & CSS

Love this component?