Let’s create a 3D Dot Preloader using HTML and CSS. This preloader will display animated dots in a 3D style to provide a visually appealing loading indicator for your web pages.
We’ll use HTML to structure the preloader and CSS to style and animate the dots to achieve the 3D effect.
Let’s get started on building the 3D Dot Preloader. Whether you’re a beginner or an experienced developer, this project offers a great way to practice your web design skills and create an engaging loading indicator. Let’s add some stylish loading animations to our projects!
HTML :
This HTML code creates a basic web page with a 3D dot preloader using only CSS for styling. It defines a document with the necessary metadata and links to an external stylesheet (style.css). The body of the document contains a div with the class pl, which serves as a container for four inner div elements, each representing a dot with classes pl__dot and additional unique classes (pl__dot--a, pl__dot--b, pl__dot--c, pl__dot--d). These dots will be styled and animated using CSS to create a loading animation effect.
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>3D Dot Preloader (pure CSS)</title> <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <div class="pl"> <div class="pl__dot pl__dot--a"></div> <div class="pl__dot pl__dot--b"></div> <div class="pl__dot pl__dot--c"></div> <div class="pl__dot pl__dot--d"></div> </div> <!-- partial --> </body> </html>
CSS :
This CSS code defines styles for a webpage that features a 3D dot preloader animation. It begins with a reset of default browser styles using the universal selector (*). The :root pseudo-class sets CSS variables for colors, transition durations, and responsive font sizes. The .pl class styles the preloader container with 3D transformation properties. Each .pl__dot class applies general styles for the dots, including size, position, and animation settings. The specific dot classes (.pl__dot--a, .pl__dot--b, .pl__dot--c, .pl__dot--d) set individual colors and shadows for the dots. Finally, keyframe animations (@keyframes) are defined to create complex 3D rotational and translational movements for each dot, giving the appearance of a dynamic preloading animation.
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--hue: 223;
--bg: hsl(var(--hue),10%,5%);
--fg: hsl(var(--hue),10%,95%);
--dot-a: 313;
--dot-b: 253;
--dot-c: 223;
--dot-d: 283;
--trans-dur: 0.3s;
font-size: calc(14px + (30 - 14) * (100vw - 280px) / (3840 - 280));
}
body {
background-color: var(--bg);
color: var(--fg);
display: flex;
font: 1em/1.5 sans-serif;
height: 100vh;
transition: background-color var(--trans-dur), color var(--trans-dur);
}
.pl {
margin: auto;
perspective: 18em;
position: relative;
width: 9em;
height: 9em;
transform-style: preserve-3d;
}
.pl__dot {
animation-duration: 3s;
animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
animation-iteration-count: infinite;
border-radius: 50%;
position: absolute;
top: calc(50% - 1.5em);
left: calc(50% - 1.5em);
width: 3em;
height: 3em;
}
.pl__dot--a {
animation-name: dot-a;
background-color: hsl(var(--dot-a), 90%, 60%);
box-shadow: -0.5em -0.5em 1em hsl(var(--dot-a), 90%, 30%) inset, 0.125em 0.125em 0.25em hsl(var(--dot-a), 90%, 60%) inset, -0.25em -0.25em 0.75em 0.75em hsl(var(--dot-a), 90%, 50%) inset, 0.75em 0.75em 0.75em hsla(var(--hue), 10%, 5%, 0.7);
}
.pl__dot--b {
animation-name: dot-b;
background-color: hsl(var(--dot-b), 90%, 60%);
box-shadow: -0.5em -0.5em 1em hsl(var(--dot-b), 90%, 30%) inset, 0.125em 0.125em 0.25em hsl(var(--dot-b), 90%, 60%) inset, -0.25em -0.25em 0.75em 0.75em hsl(var(--dot-b), 90%, 50%) inset, 0.75em 0.75em 0.75em hsla(var(--hue), 10%, 5%, 0.7);
}
.pl__dot--c {
animation-name: dot-c;
background-color: hsl(var(--dot-c), 90%, 60%);
box-shadow: -0.5em -0.5em 1em hsl(var(--dot-c), 90%, 30%) inset, 0.125em 0.125em 0.25em hsl(var(--dot-c), 90%, 60%) inset, -0.25em -0.25em 0.75em 0.75em hsl(var(--dot-c), 90%, 50%) inset, 0.75em 0.75em 0.75em hsla(var(--hue), 10%, 5%, 0.7);
}
.pl__dot--d {
animation-name: dot-d;
background-color: hsl(var(--dot-d), 90%, 60%);
box-shadow: -0.5em -0.5em 1em hsl(var(--dot-d), 90%, 30%) inset, 0.125em 0.125em 0.25em hsl(var(--dot-d), 90%, 60%) inset, -0.25em -0.25em 0.75em 0.75em hsl(var(--dot-d), 90%, 50%) inset, 0.75em 0.75em 0.75em hsla(var(--hue), 10%, 5%, 0.7);
}
/* Animations */
@keyframes dot-a {
from {
transform: rotateY(0) rotateZ(0) translateX(-100%) rotateY(0) rotateZ(0);
}
50% {
transform: rotateY(1turn) rotateZ(0) translateX(-100%) rotateY(-1turn) rotateZ(0);
}
to {
transform: rotateY(1turn) rotateZ(-1turn) translateX(-100%) rotateY(-1turn) rotateZ(1turn);
}
}
@keyframes dot-b {
from {
transform: rotateY(0) rotateZ(0) translateX(100%) rotateY(0) rotateZ(0);
}
50% {
transform: rotateY(1turn) rotateZ(0) translateX(100%) rotateY(-1turn) rotateZ(0);
}
to {
transform: rotateY(1turn) rotateZ(-1turn) translateX(100%) rotateY(-1turn) rotateZ(1turn);
}
}
@keyframes dot-c {
from {
transform: rotateZ(0) rotateX(0) translateY(-100%) rotateZ(0) rotateX(0);
}
50% {
transform: rotateZ(-1turn) rotateX(0) translateY(-100%) rotateZ(1turn) rotateX(0);
}
to {
transform: rotateZ(-1turn) rotateX(1turn) translateY(-100%) rotateZ(1turn) rotateX(-1turn);
}
}
@keyframes dot-d {
from {
transform: rotateZ(0) rotateX(0) translateY(100%) rotateZ(0) rotateX(0);
}
50% {
transform: rotateZ(-1turn) rotateX(0) translateY(100%) rotateZ(1turn) rotateX(0);
}
to {
transform: rotateZ(-1turn) rotateX(1turn) translateY(100%) rotateZ(1turn) rotateX(-1turn);
}
}
In conclusion, creating a 3D Dot Preloader using HTML and CSS has been a fun and educational project. By combining HTML for structure and CSS for styling and animations, we’ve crafted a visually engaging loading indicator that adds a touch of elegance to the user experience. This project is perfect for enhancing your web designs with modern and interactive elements.
If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!
