IntroductionWelcome to Day 23 of the #100DaysOfCode challenge! Today, we’re diving into the world of frontend development by creating an exciting project: an animated rocket loader. This loader will not only enhance the visual appeal of your website but also provide a unique loading experience for your users. Let’s get started!
Step 1: Setting Up the Project
First, download the full source code from the provided link: source code download. Once downloaded, create a new directory for your project and extract the source code files into it.
Step 2: HTML Structure
Open the index.html file in your code editor. We’ll start by defining the basic structure of our HTML document. Copy and paste the following code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”style.css”>
<title>Animated Rocket Loader</title>
</head>
<body>
<div class=”rocket-loader”>
<div class=”rocket”>
<div class=”rocket-extras”></div>
<div class=”jet”><span></span></div>
</div>
</div>
</body>
</html>
Step 3: Styling with CSS
Now, let’s add some styles to make our rocket loader visually appealing. Open the style.css file. We’ll include styles for the rocket loader, rocket, jet, and animations. Copy and paste the provided CSS code.
@import url(“https://fonts.googleapis.com/css?family=Ubuntu:400,400i,700,700i”);
*,
*:before,
*:after {
margin: 0;
padding: 0;
word-break: break-all;
box-sizing: border-box;
}
html {
font-size: 10px;
}
body {
font-family: “Ubuntu”, sans-serif;
color: #6e6e6e;
font-size: 1.6rem;
}
header,
footer {
display: block;
}
a,
a:link,
a:visited {
color: #4d4d4d;
text-decoration: none;
}
img {
border: 0;
}
ul {
list-style: none;
}
.center {
margin: auto;
width: 110rem;
}
.rocket-loader {
-webkit-animation: moveParticles 6s linear infinite;
animation: moveParticles 6s linear infinite;
background: linear-gradient(90deg, gray, transparent 10%) 0 20%/180% 0.2rem repeat-x, linear-gradient(90deg, gray, transparent 20%) 0 80%/150% 0.2rem repeat-x, linear-gradient(90deg, gray, transparent 5%) 0 65%/100% 0.2rem repeat-x, linear-gradient(90deg, gray, transparent 5%) 0 40%/220% 0.2rem repeat-x, linear-gradient(0, white, white);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
box-shadow: inset 0 0 60px 0 rgba(0, 0, 0, 0.1);
height: 125px;
left: 50%;
overflow: hidden;
position: absolute;
text-align: center;
top: 50%;
transform: translate(-50%, -50%);
width: 125px;
}
.rocket-loader::before {
-webkit-animation: blink 1s infinite;
animation: blink 1s infinite;
bottom: 6%;
content: “Loading…”;
font-size: 12px;
left: 0;
position: absolute;
right: 0;
}
.rocket {
-webkit-animation: moveRocket 2s linear infinite;
animation: moveRocket 2s linear infinite;
background: lightgray;
background: linear-gradient(#990000, red, #990000);
border-left: 3px solid rgba(0, 0, 0, 0.4);
border-radius: 50%/30%;
height: 15%;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 35%;
}
.rocket::before,
.rocket::after {
content: “”;
position: absolute;
}
.rocket::before {
-webkit-animation: rotateFins 1s infinite;
animation: rotateFins 1s infinite;
background: #bababa;
background: linear-gradient(#990000, red, #990000);
border: 2px solid transparent;
border-radius: 0 50% 50% 0;
height: 140%;
top: 50%;
transform: translate(0, -50%);
left: 6px;
width: 20%;
}
.rocket::after {
border: 7px solid transparent;
border-left: 14px solid rgba(0, 0, 0, 0.4);
border-radius: 15%;
right: -16px;
top: 2px;
}
.rocket-extras {
-webkit-animation: moveExtras 1s infinite;
animation: moveExtras 1s infinite;
background: rgba(0, 0, 0, 0.4);
height: 2px;
left: 12px;
margin: -2px 0 0;
position: absolute;
top: 50%;
transform: translate(0, -50%);
width: 10px;
}
.rocket-extras::before,
.rocket-extras::after {
content: “”;
position: absolute;
}
.rocket-extras::before {
background: white;
border-radius: 50%;
height: 5px;
right: -7px;
top: -1px;
width: 5px;
}
.rocket-extras::after {
background: #cc0000;
border-top: 1px solid #660000;
height: 1px;
left: -10px;
top: 1px;
width: 6px;
}
.jet {
height: 10px;
left: -10px;
position: absolute;
top: calc(50% – 5px);
width: 10px;
}
.jet::before,
.jet::after,
.jet span {
-webkit-animation: moveSmoke 0.3s infinite;
animation: moveSmoke 0.3s infinite;
background: #e09100;
border-radius: 50%;
content: “”;
filter: blur(2px);
height: 8px;
left: -6px;
opacity: 1;
position: absolute;
transform: translate(0, 0) scale(1);
top: 1px;
width: 15px;
}
.jet::after {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.jet span {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
Step 4: Adding Animation Keyframes
To bring our rocket loader to life, we need to define keyframes for various animations. These keyframes will control the movement of the particles, rocket, fins, and smoke. Copy and paste the animation keyframes provided in the CSS file.
@-webkit-keyframes moveParticles {
100% {
background-position-x: -500rem;
}
}
@keyframes moveParticles {
100% {
background-position-x: -500rem;
}
}
@-webkit-keyframes moveRocket {
0%,
100% {
transform: translate(-50%, calc(-50% – 1rem));
}
50% {
transform: translate(-50%, calc(-50% + 1rem));
}
}
@keyframes moveRocket {
0%,
100% {
transform: translate(-50%, calc(-50% – 1rem));
}
50% {
transform: translate(-50%, calc(-50% + 1rem));
}
}
@-webkit-keyframes rotateFins {
0%,
100% {
height: 140%;
}
50% {
border-top: 2px solid #660000;
border-bottom: 2px solid #660000;
height: 110%;
}
}
@keyframes rotateFins {
0%,
100% {
height: 140%;
}
50% {
border-top: 2px solid #660000;
border-bottom: 2px solid #660000;
height: 110%;
}
}
@-webkit-keyframes moveExtras {
0%,
100% {
transform: translate(0, calc(-50% + 0.1rem));
}
50% {
transform: translate(0, calc(-50% – 0.1rem));
}
}
@keyframes moveExtras {
0%,
100% {
transform: translate(0, calc(-50% + 0.1rem));
}
50% {
transform: translate(0, calc(-50% – 0.1rem));
}
}
@-webkit-keyframes moveSmoke {
100% {
filter: blur(3px);
opacity: 0;
transform: translate(-40px, 0) scale(2);
}
}
@keyframes moveSmoke {
100% {
filter: blur(3px);
opacity: 0;
transform: translate(-40px, 0) scale(2);
}
}
@-webkit-keyframes blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.2;
}
}
@keyframes blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.2;
}
}
Step 5: Testing and Tweaking
Save all your files and open the index.html file in your web browser. You should see the animated rocket loader in action! Play around with the CSS styles and animation keyframes to customize the loader according to your preferences. You can adjust colors, sizes, and timings to achieve the desired effect.
Conclusion
Congratulations on completing Day 23 of the #100DaysOfCode challenge! You’ve successfully built an animated rocket loader from scratch using HTML and CSS. This project not only improves your front-end development skills but also adds an engaging element to your web projects. Keep coding and stay tuned for more exciting challenges ahead!
If you have any questions or need further assistance, feel free to contact me via my website. Happy coding!
Source: hashnode.com