Learn how to create an animated never-ending box in CSS with this step-by-step tutorial. Enhance your animation with delays and easing.
Table of Contents
Loading animations enhance user experience by keeping visitors engaged while content loads. In this guide, we’ll create a CSS Animated Never-Ending Box Loader using pure CSS. This animation mimics a box rolling endlessly up a hill, providing a visually appealing effect. No JavaScript is needed—just clean and smooth CSS animations. Let’s dive in and build this engaging loader step by step!
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our never-ending box. Here's a breakdown of each part:
<!DOCTYPE html>
- Declares the document type as HTML5.
<html lang="en">
- Starts the HTML document with the language set to English.
<head> Section:
<title>Animated CSS</title>→ Sets the page title to "Animated CSS".<meta charset="UTF-8" />→ Ensures the document supports all characters.<meta name="viewport" content="width=device-width" />→ Makes the page responsive.<link rel="stylesheet" href="styles.css" />→ Links an external CSS file (styles.css) for styling and animation.
<body> Section:
<div class="loader">→ A wrapper div for the loader animation.<div class="box"></div>→ Represents a moving box in the animation.<div class="hill"></div>→ Represents the hill or background effect.
After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.
Step 2 (CSS Code):
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create never-ending animation. Let's break it down step by step:
1. General Styles
html, body {
background-color: #404456;
}- Sets the background color of the entire page to dark grayish-blue (#404456).
2. Loader Container
.loader {
position: absolute;
top: 50%;
left: 50%;
margin-top: -2.7em;
margin-left: -2.7em;
width: 5.4em;
height: 5.4em;
background-color: #404456;
}- Centers the loader on the page using position: absolute; top: 50%; left: 50%;
- Moves it up and left slightly (margin-top: -2.7em; margin-left: -2.7em;) to perfectly align the center.
- Size: 5.4em x 5.4em
- Background color matches the page to blend in.
3. The Hill Shape (Bordered Square Rotated to Look Like a Hill)
.hill {
position: absolute;
width: 7.1em;
height: 7.1em;
top: 1.7em;
left: 1.7em;
background-color: transparent;
border-left: .25em solid whitesmoke;
transform: rotate(45deg);
}- Creates a diagonal "hill" using a rotated square.
- Border-left (.25em solid whitesmoke) gives the illusion of an incline.
- Positioning (top: 1.7em; left: 1.7em;) aligns it properly.
- Rotated 45 degrees to form a sloped effect.
Adding an Extra Layer for the Hill
.hill:after {
content: '';
position: absolute;
width: 7.1em;
height: 7.1em;
left: 0;
background-color: #404456;
}- Hides part of the border by overlaying another dark-colored square.
4. The Rolling Box (Animated)
.box {
position: absolute;
left: 0;
bottom: -.1em;
width: 1em;
height: 1em;
background-color: transparent;
border: .25em solid whitesmoke;
border-radius: 15%;
transform: translate(0, -1em) rotate(-45deg);
animation: push 2.5s cubic-bezier(.79, 0, .47, .97) infinite;
}- Creates a small box (1em x 1em).
- Bordered in whitesmoke to stand out.
- Rounded corners (border-radius: 15%) make it look smoother.
- Initially positioned at the start of the incline using transform: translate(0, -1em) rotate(-45deg);
- Animation (push 2.5s cubic-bezier(...) infinite;) makes it roll upwards.
5. The Rolling Animation (@keyframes push)
@keyframes push {
0% { transform: translate(0, -1em) rotate(-45deg); }
5% { transform: translate(0, -1em) rotate(-50deg); }
20% { transform: translate(1em, -2em) rotate(47deg); }
25% { transform: translate(1em, -2em) rotate(45deg); }
30% { transform: translate(1em, -2em) rotate(40deg); }
45% { transform: translate(2em, -3em) rotate(137deg); }
50% { transform: translate(2em, -3em) rotate(135deg); }
55% { transform: translate(2em, -3em) rotate(130deg); }
70% { transform: translate(3em, -4em) rotate(217deg); }
75% { transform: translate(3em, -4em) rotate(220deg); }
100% { transform: translate(0, -1em) rotate(-225deg); }
}- The box moves up the hill, rotating at different angles.
- It repeats infinitely, creating a smooth rolling effect.
- The cubic-bezier function in animation controls the speed variation.
This will give our box an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
Final Output:
Conclusion:
Creating a CSS Animated Never-Ending Box Loader is a great way to add a unique touch to your website. With just CSS, we achieved a smooth, looping effect without any extra scripts. This simple yet effective animation enhances user engagement and makes waiting times more visually appealing. Try customizing colors, speeds, and sizes to fit your project’s theme. Keep experimenting and make your website stand out!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
