How to Create an Engaging Animated 3D Loader with HTML and CSS
Step-by-Step Guide to Building a 3D Loader Animation with HTML and CSS
Creating an animated 3D loader can significantly enhance the visual appeal of your website. This step-by-step guide will walk you through the process of building a 3D loader using HTML and CSS. This project is part of Day 42 of the #100DaysOfCode Challenge.
Step 1: Setting Up the HTML Structure
To start, create a basic HTML structure. This includes setting the character encoding, viewport settings, and linking to an external CSS stylesheet.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Character encoding set to UTF-8 -->
<meta charset="UTF-8">
<!-- Ensures proper rendering and touch zooming on mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Link to external CSS stylesheet -->
<link rel="stylesheet" href="style.css">
<!-- The title of the web page -->
<title>Animated 3D Loader</title>
</head>
<body>
<!-- Container for the loader animation -->
<div class="loader">
<!-- First box in the loader animation -->
<div class="box box-1">
<!-- Left side of the box -->
<div class="side-left"></div>
<!-- Right side of the box -->
<div class="side-right"></div>
<!-- Top side of the box -->
<div class="side-top"></div>
</div>
<!-- Second box in the loader animation -->
<div class="box box-2">
<div class="side-left"></div>
<div class="side-right"></div>
<div class="side-top"></div>
</div>
<!-- Third box in the loader animation -->
<div class="box box-3">
<div class="side-left"></div>
<div class="side-right"></div>
<div class="side-top"></div>
</div>
<!-- Fourth box in the loader animation -->
<div class="box box-4">
<div class="side-left"></div>
<div class="side-right"></div>
<div class="side-top"></div>
</div>
</div>
</body>
</html>
Step 2: Adding Basic CSS Styles
Next, apply some basic CSS to remove default margins and padding and center the loader within the viewport.
/* Apply universal box-sizing and remove default margin and padding */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Center the loader within the viewport */
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
Step 3: Styling the Loader Container
Scale up the loader for better visibility and set its dimensions.
/* Style for the loader container */
.loader {
/* Scale up the loader for better visibility */
scale: 3;
height: 50px;
width: 40px;
}
Step 4: Styling the Boxes
Each box has common styles, including positioning, opacity, and initial left position.
/* Common styles for all boxes */
.box {
position: relative;
opacity: 0;
left: 10px;
}
Step 5: Adding Box Sides
Each box consists of three sides: left, right, and top. These sides are styled individually.
/* Style for the left side of each box */
.side-left {
position: absolute;
background-color: #286cb5;
width: 19px;
height: 5px;
transform: skew(0deg, -25deg);
top: 14px;
left: 10px;
}
/* Style for the right side of each box */
.side-right {
position: absolute;
background-color: #2f85e0;
width: 19px;
height: 5px;
transform: skew(0deg, 25deg);
top: 14px;
left: -9px;
}
/* Style for the top side of each box */
.side-top {
position: absolute;
background-color: #5fa8f5;
width: 20px;
height: 20px;
rotate: 45deg;
transform: skew(-20deg, -20deg);
}
Step 6: Animating the Boxes
Each box is animated using keyframes. The animation varies slightly for each box to create a staggered effect.
/* Animation for the first box */
.box-1 {
animation: from-left 4s infinite;
}
/* Animation for the second box with a delay */
.box-2 {
animation: from-right 4s infinite;
animation-delay: 1s;
}
/* Animation for the third box with a longer delay */
.box-3 {
animation: from-left 4s infinite;
animation-delay: 2s;
}
/* Animation for the fourth box with the longest delay */
.box-4 {
animation: from-right 4s infinite;
animation-delay: 3s;
}
Step 7: Defining Keyframes
Define the keyframes for the animations. This controls the movement and opacity of the boxes as they animate.
/* Keyframes for the animation from the left */
@keyframes from-left {
0% {
z-index: 20;
opacity: 0;
translate: -20px -6px;
}
20% {
z-index: 10;
opacity: 1;
translate: 0px 0px;
}
40% {
z-index: 9;
translate: 0px 4px;
}
60% {
z-index: 8;
translate: 0px 8px;
}
80% {
z-index: 7;
opacity: 1;
translate: 0px 12px;
}
100% {
z-index: 5;
translate: 0px 30px;
opacity: 0;
}
}
/* Keyframes for the animation from the right */
@keyframes from-right {
0% {
z-index: 20;
opacity: 0;
translate: 20px -6px;
}
20% {
z-index: 10;
opacity: 1;
translate: 0px 0px;
}
40% {
z-index: 9;
translate: 0px 4px;
}
60% {
z-index: 8;
translate: 0px 8px;
}
80% {
z-index: 7;
opacity: 1;
translate: 0px 12px;
}
100% {
z-index: 5;
translate: 0px 30px;
opacity: 0;
}
}
Conclusion
By following these steps, you can create an eye-catching 3D loader for your website. This animation not only enhances the user experience but also demonstrates your CSS skills. Download the full source code here. For any queries, you can contact me here.
Feel free to support my work so I can continue to provide free prompts and tutorials.