Table of contents
The CSS calc() function is an indispensable addition to the web developer toolbox, which every developer should have. We can use it to do a lot of things. In this tutorial, we'll focus on how we can utilize CSS calc() to build a loading animation that is lovely and easy, but first, let's look at what CSS calc is.
What is CSS calc?
The CSS calc function is a method that allows you to conduct computations when specifying CSS property values. It's convenient for calculating length, percentage, time, number, integer frequency, or angle, among other things.
Syntax:
calc( Expression)
The calc() function takes a single expression as its parameter. The expression's result is then used as the value.
Now that we have an idea of the CSS calc() let's move on to using it to create our animation.
Building our animation effect
Here’s a how the finished project will look like:
Let's start building!
The first thing we'll do is create a folder for our project. We'll create two files inside our folder: the index.html and our styling styles.css. We'll start by writing the basic syntax and link to our styling in our HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css"/>
<title>Document</title>
</head>
<body>
</body>
</html>
We'll create a section containing a div with a class inside our body tag. I'll be naming mine animate-loading
<section>
<div class="animate-loading">
</div>
</section>
Next, let's create a series of div with a class and style in which we would contain our variable. It would be inside our first div:
<div class="block" style="--i: 1"></div>
<div class="block" style="--i: 2"></div>
<div class="block" style="--i: 3"></div>
<div class="block" style="--i: 4"></div>
<div class="block" style="--i: 5"></div>
<div class="block" style="--i: 6"></div>
<div class="block" style="--i: 7"></div>
<div class="block" style="--i: 8"></div>
<div class="block" style="--i: 9"></div>
<div class="block" style="--i: 10"></div>
<div class="block" style="--i: 11"></div>
<div class="block" style="--i: 12"></div>
<div class="block" style="--i: 13"></div>
<div class="block" style="--i: 14"></div>
<div class="block" style="--i: 15"></div>
<div class="block" style="--i: 16"></div>
<div class="block" style="--i: 17"></div>
<div class="block" style="--i: 18"></div>
<div class="block" style="--i: 19"></div>
<div class="block" style="--i: 20"></div>
And lastly, for our HTML, we add a heading of loading underneath right before the closing of the first div.
<h3>Loading</h3>
Now we're done with everything regarding the HTML part. Let's move on to our style.css
Inside our CSS, let's remove the default padding margin, give sizing to our box, and configure our font.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Courier New', Courier, monospace;
}
Next is our section.
section{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #001d10;
animation: animateMyBackgroundcolor 10s linear infinite;
}
Here, we are setting the display flexibly, justifying the content and items to the center. We also set our min-height to a 100 viewport height(vh). I gave it a background color that is subject to change. We also set our animation to a keyframe identifier called animateMyBackgroundcolor . let's move on to create the keyframe.
@keyframes animateMyBackgroundcolor {
0%{
filter: hue-rotate(0deg);
}
100%{
filter: hue-rotate(360deg) ;
}
}
We will allow our effects and the background to change their color once it rotates 360 degrees.
The next is our div. We'll work on the first div and the series of div, which we numbered in each variable.
.animate-loading{
position: relative;
width: 250px;
height: 250px;
}
.block{
position: absolute;
width: 8px;
height: 25px;
background: #050c09;
left: 50%;
border-radius: 8px;
transform: rotate(calc(18deg * var(--i)));
transform-origin: 0 125px ;
animation: animate 1.9s ease-in-out infinite;
animation-delay: calc(0.05s * var(--i));
}
We are just setting our position width and height for the first class. The second class block is our focus, as that is where we are utilizing our calc function to achieve a rotation and animation delay.
We also set our animation to a keyframe identifier called animate. It will be responsible for the animation of our blocks. Let's create the keyframe
@keyframes animate {
0%,50%{
background: #050c09;
box-shadow: none;
}
50.1%,100%{
background: #38d2dd;
box-shadow: 0 0 5px #38d2dd,
0 0 15px #38d2dd,
0 0 30px #38d2dd,
0 0 60px #38d2dd,
0 0 90px #38d2dd;
}
}
The last one we want to work on is our heading.
h3{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 2em;
letter-spacing: 2px;
animation:animateText 2s ease-in-out infinite;
animation-delay: -1s;
}
We are setting the position of our heading, placing it between our loading animation. We also want our heading to be animated, so we're basically, so we'll be attributing our animation to a keyframe called animateText as its identifier.
Let's now create the keyframe
@keyframes animateText {
0%,50%{
color: #050c09;
text-shadow: none;
}
50.1%,100%{
color: #38d2dd;
text-shadow: 0 0 5px #38d2dd,
0 0 15px #38d2dd;
}
}
All done! We can go to our browser and see the result.
Conclusion
In this article, we talked about CSS calc() as a tool that every developer should be able to use. We also defined and used what we learned about it to build an animation effect. There are numerous ways we can use the CSS calc(), and this is just of them. Would you please share if you found this helpful?