Introduction
In this article i am going to explain how to create dynamic loading animation with just using Html and CSS. The loading animation is often the first interaction users have with a website. It sets the stage, hinting at the experience to come and shaping perceptions from the outset. Today, we're thrilled to introduce a groundbreaking new loading animation that promises to captivate and delight users like never before. Dynamic Ball Effects, Three vibrant balls descend gracefully onto the screen, each bouncing with a satisfying squashing effect upon landing. It's a symphony of motion, a visual feast that holds the viewer's attention and builds anticipation for what lies ahead.
Let's start with creating files index.html and style.css.
Html Code Explanation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading Circles | CSS Animations</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Container for the loading animation -->
</body>
</html>DOCTYPE Specifies the document type and version of HTML, head contains metadata about the HTML document, such as character encoding and viewport settings. meta specifies the character encoding of the document as UTF-8 and configures the viewport properties for responsive design.
title sets the title of the HTML document, displayed in the browser tab. link links the HTML file to an external CSS stylesheet.
<body>
<!-- Container for the loading animation -->
<div class="wrapper">
<!-- Three circles representing the loading animation -->
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<!-- Shadow effects for each circle -->
<div class="shadow"></div>
<div class="shadow"></div>
<div class="shadow"></div>
</div>
</body>.wrapper class creates a container for the loading animation and its the parent div where we will work on these animated balls, .circle generates three circles within the wrapper div to represent the animated circles and we will color each of them, .shadow adds three shadow divs to create shadow effects for each circle and we will add animations on them a specific ball bounces.
Video Tutorial
CSS Code Explanation
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html, body {
display: grid;
height: 100%;
place-items: center;
background: #202020;
}* is a universal selector that targets all elements in the HTML document.
padding, margin resets the padding and margin of all elements to 0, ensuring consistent spacing. box-sizing: border-box;: Sets the box-sizing property of all elements to border-box, which includes padding and border in the element's total width and height. html, body: Selects the html and body elements in the document. display: grid;: Sets the display property to grid, allowing for a grid layout. height: 100%;: Sets the height of the html and body elements to 100% of the viewport height. place-items: center;: Centers the content vertically and horizontally within the grid container.
background: #202020;: Sets the background color of the html and body elements to dark gray.
.wrapper {
width: 200px;
height: 60px;
position: relative;
z-index: 1;
}
.circle {
width: 20px;
height: 20px;
position: absolute;
left: 15%;
border-radius: 50%;
background: #fff;
transform-origin: 50%;
animation: circle1 .5s alternate infinite ease;
}.wrapper: Targets elements with the class "wrapper". width and height Sets the width and height of elements with the class "wrapper". position: relative;: Positions the elements relative to their normal position in the document flow. z-index: 1;: Sets the stacking order of the elements, ensuring they are displayed above other elements. .circle: Targets elements with the class "circle". width, height Sets the width and height of elements with the class "circle". position: absolute;: Positions the elements absolutely within their containing element. left: 15%;: Sets the left offset of the elements to 15% of the width of their containing element. border-radius: 50%;: Rounds the corners of the elements to create a circular shape. background: #fff;: Sets the background color of the elements to white. transform-origin: 50%;: Sets the origin point for transformations to the center of the elements. animation: circle1 .5s alternate infinite ease;: Applies the "circle1" animation to the elements, specifying its duration, iteration count, and timing function.
@keyframes circle1 {
0% {
top: 60px;
height: 5px;
border-radius: 50px 50px 25px 25px;
transform: scaleX(1.7);
}
40% {
height: 20px;
border-radius: 50%;
transform: scaleX(1);
}
100% {
top: 0%;
}
}@keyframes circle1: Defines a custom animation named "circle1". 0%: Specifies the starting point of the animation. top: 60px;: Positions the elements 60 pixels from the top of their containing element. height: 5px;: Sets the height of the elements to 5 pixels. border-radius: 50px 50px 25px 25px;: Sets different border radii for each corner of the elements, creating a non-uniform circular shape. transform: scaleX(1.7);: Scales the elements along the x-axis to 1.7 times their original width. 40%: Specifies the state of the animation at 40% completion. height: 20px;: Increases the height of the elements to 20 pixels. border-radius: 50%;: Resets the border-radius property to make the elements fully circular. transform: scaleX(1);: Resets the scale transformation to its original value. 100%: Specifies the ending point of the animation. top: 0%;: Positions the elements at the top of their containing element.
.circle:nth-child(1) {
background-color: rgb(255, 0, 144);
}
.circle:nth-child(2) {
left: 45%;
background-color: rgb(111, 255, 0);
animation-delay: .2s;
}
.circle:nth-child(3) {
left: auto;
right: 15%;
animation-delay: .3s;
background-color: rgb(255, 255, 0);
}.circle:nth-child(1): Targets the first element with the class "circle". background-color: rgb(255, 0, 144);: Sets the background color of the first circle to a shade of pink.
.circle:nth-child(2): Targets the second element with the class "circle". left: 45%;: Adjusts the left position of the second circle to 45% of its containing element's width. background-color: rgb(111, 255, 0);: Sets the background color of the second circle to a shade of green. animation-delay: .2s;: Delays the start of the animation for the second circle by 0.2 seconds.
.circle:nth-child(3): Targets the third element with the class "circle". left: auto; right: 15%;: Adjusts the right position of the third circle to 15% of its containing element's width. animation-delay: .3s;: Delays the start of the animation for the third circle by 0.3 seconds. background-color: rgb(255, 255, 0);: Sets the background color of the third circle to a shade of yellow.
.shadow {
width: 20px;
height: 4px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.9);
position: absolute;
top: 62px;
transform-origin: 50%;
z-index: -1;
left: 15%;
filter: blur(1px);
animation: shadow1 .5s alternate infinite ease;
}
@keyframes shadow1 {
0% {
transform: scaleX(1.5);
}
40% {
transform: scaleX(1);
}
100% {
transform: scaleX(.2);
opacity: .4;
}
}
.shadow:nth-child(4) {
left: 45%;
animation-delay: .2s;
}
.shadow:nth-child(5) {
left: auto;
right: 15%;
animation-delay: .3s;
}.shadow: Targets elements with the class "shadow" to add shadow effects when ball moves up.
width height: Sets the width and height of the shadow elements. border-radius: 50%;: Makes the shadows fully circular. background-color: rgba(0, 0, 0, 0.9);: Sets the background color of the shadows with 90% opacity, creating a semi-transparent black color. position: absolute;: Positions the shadows absolutely within their containing element. top: 62px;: Positions the shadows 62 pixels from the top of their containing element. transform-origin: 50%;: Sets the origin point for transformations to the center of the shadows. z-index: -1;: Sets the stacking order of the shadows to be behind other elements. left: 15%;: Adjusts the left position of the shadows to 15% of their containing element's width. filter: blur(1px);: Applies a blur effect to the shadows, making them slightly softer. animation: shadow1 .5s alternate infinite ease;: Applies the "shadow1" animation to the shadows, specifying its duration, iteration count, and timing function.
@keyframes shadow1: Defines a custom animation named "shadow1" for the shadows. 0%: Specifies the starting point of the animation. transform: scaleX(1.5);: Scales the shadows along the x-axis to 1.5 times their original width. 40%: Specifies the state of the animation at 40% completion. transform: scaleX(1);: Resets the scale transformation to its original value. 100%: Specifies the ending point of the animation. transform: scaleX(.2);: Scales the shadows along the x-axis to 0.2 times their original width. opacity: .4;: Sets the opacity of the shadows to 0.4.
Download Source Code
Conclusions
It demonstrates the power of CSS to create engaging loading animations without the need for complex JavaScript or external libraries. By leveraging CSS animations and transitions adeptly, it achieves a visually appealing effect with minimal code. The use of bouncing circles and subtle shadows adds depth and dynamism to the loading experience, capturing user attention effortlessly. Furthermore, the project showcases CSS's versatility in enhancing user interfaces, offering a seamless and elegant loading solution that contributes to an overall delightful browsing experience.