3 Dot Loading Animation Using CSS

Welcome To Code With Random Blog. In This Blog, We Learn How To Create A 3 Dot Loading Animation Using CSS. We Use HTML and CSS  For 3-Dot Loading Animation.

Before the actual content appears, websites use the loading animation css effect to create a loading animation. These loading animations are used to make the website more engaging. In order to prevent a lack of interest in the website, these loading animations are useful when the loading time is too lengthy.

Code by	Ricardo Oliva Alonso
Project Download	Link Available Below
Language used	HTML and CSS
External link / Dependencies	No
Responsive	Yes

50+ HTML, CSS & JavaScript Projects With Source Code

Hope You Enjoy Our Blog So Let’s Start With A Basic Html Structure For The 3 Dot Loading Animation.

Html Code For Loading Dot

<div class="main">
<div class="balls balls-1">
<div class="ball ball--1"></div>
<div class="ball ball--2"></div>
<div class="ball ball--3"></div>
<div class="ball ball--4"></div>
</div>
<div class="balls balls-2">
<div class="ball ball--1"></div>
<div class="ball ball--2"></div>
<div class="ball ball--3"></div>
<div class="ball ball--4"></div>
</div>
</div>

Simple Portfolio Website Using Html And Css With Source Code

Now to add the structure for our dot loading animation, we will create a div section with classmain,” which we will use as the main container, and then inside the main container we will create two parent div sections for the balls, and inside them we will create child div sections for different balls.

Now if we look at the html output you will find a blank screen so to show you that we have added structure we will  type some temporary text inside the structure.

There is all html code for the 3 Dot Loading Animation. Now, you can see output without Css. Then we write CSS Code for the 3 Dot Loading Animation.

5+ HTML CSS project With Source Code

Output Of 3 Dot Loading Animation Css

Blank Output with Blank Html Tag

 

Css Code For Loading Dot

 *{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
background-color: #191940;
overflow: hidden;
}
.main{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 360px;
height: 100vh;
position: relative;
}
.balls{
display: flex;
height: 100%;
width: 100%;
position: absolute;
}
.ball{
position: absolute;
top: -50px;
width: 50px;
height: 50px;
background: peru;
border-radius: 50%;
margin: 0 20px;
animation: ball 4s infinite;
}
.ball--1{ background-image: linear-gradient(to bottom , #FFE93E, #FF952A);}
.ball--2{ background-image: linear-gradient(to bottom , #FF009E, #FF0038);}
.ball--3{ background-image: linear-gradient(to bottom , #00F4FE, #00BDFB);}
.ball--4{ background-image: linear-gradient(to bottom , #FC00F9, #B500F9);}
.balls-1 .ball--1{ left: 20px; animation-delay: 0; }
.balls-1 .ball--2{ left: 100px; animation-delay: .05s; }
.balls-1 .ball--3{ left: 180px; animation-delay: .1s; }
.balls-1 .ball--4{ left: 260px; animation-delay: .15s; }
.balls-2 .ball--1{ left: 20px; animation-delay: 2s; }
.balls-2 .ball--2{ left: 100px; animation-delay: 2.05s; }
.balls-2 .ball--3{ left: 180px; animation-delay: 2.1s; }
.balls-2 .ball--4{ left: 260px; animation-delay: 2.15s; }
@keyframes ball {
0%, 25%{ top: -50px; }
35%{ top: calc(60% - 50px ); }
40%{ top: calc(45% - 50px ); }
45%{ top: calc(55% - 50px ); }
50%, 70%{ top: calc(50% - 25px); }
80%, 100%{ top: 100%; }
}

Step1:The padding and margin will be set to “zero” using the universal tag selector (*), and the box sizing attribute will be used to set the box sizing to “border-box”.

Restaurant Website Using HTML and CSS

We will now define the width and height of the body of our webpage using the body tag selector. The background color property will be used to change the background to “dark blue” and the width and height are set to “100%” and “100vh,” respectively.

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    background-color: #191940;
    overflow: hidden;
}

Increment Counter Using HTML ,CSS and JavaScript

Step2: Now, using the class selector, we will apply styling to our main container. (.main). We’ll use the display property to change the display to “flex,” and we’ll use some basic properties, like align items, to center it. The dimensions are “360 px” for breadth and “100 vh” for height.

We will now design the ball and apply it to our animation. With the help of the border radius property, we have given the balls a rounded appearance by setting the position as absolute, the breadth and height to 50px, and the display type to flex.

We will now add a different linear gradient and a different color to each of our balls separately by using the class selector for each ball and the background-image property.

.main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 360px;
    height: 100vh;
    position: relative;
}

.balls {
    display: flex;
    height: 100%;
    width: 100%;
    position: absolute;
}

.ball {
    position: absolute;
    top: -50px;
    width: 50px;
    height: 50px;
    background: peru;
    border-radius: 50%;
    margin: 0 20px;
    animation: ball 4s infinite;
}

.ball--1 {
    background-image: linear-gradient(to bottom, #FFE93E, #FF952A);
}

.ball--2 {
    background-image: linear-gradient(to bottom, #FF009E, #FF0038);
}

.ball--3 {
    background-image: linear-gradient(to bottom, #00F4FE, #00BDFB);
}

.ball--4 {
    background-image: linear-gradient(to bottom, #FC00F9, #B500F9);
}

Gym Website Using HTML and CSS With Source Code

Step3:Now we will be adding the animation to our balls by selecting each ball and then, using the animation-delay property, we will add a small delay to each ball to create a new pattern inside our project, and then, using the keyframes, we will be adding different keyframes to our ball to create a loading animation project.

.balls-1 .ball--1 {
    left: 20px;
    animation-delay: 0;
}

.balls-1 .ball--2 {
    left: 100px;
    animation-delay: .05s;
}

.balls-1 .ball--3 {
    left: 180px;
    animation-delay: .1s;
}

.balls-1 .ball--4 {
    left: 260px;
    animation-delay: .15s;
}

.balls-2 .ball--1 {
    left: 20px;
    animation-delay: 2s;
}

.balls-2 .ball--2 {
    left: 100px;
    animation-delay: 2.05s;
}

.balls-2 .ball--3 {
    left: 180px;
    animation-delay: 2.1s;
}

.balls-2 .ball--4 {
    left: 260px;
    animation-delay: 2.15s;
}

@keyframes ball {
    0%,
    25% {
        top: -50px;
    }
    35% {
        top: calc(60% - 50px);
    }
    40% {
        top: calc(45% - 50px);
    }
    45% {
        top: calc(55% - 50px);
    }
    50%,
    70% {
        top: calc(50% - 25px);
    }
    80%,
    100% {
        top: 100%;
    }
}

Now We Have Completed Our Css Code Section For 3 Dot Loading Animation Css.  Here Is Our Final Updated Output With Html And Css.

Final Output Of 3 Dot Loading Animation Using Css

Video Output:

Now We Have Completed Our  3 dot loading animation Using HTML and CSS. Here Is Our Updated Output With Html And Css. Hope You Like The 3 Dot Loading Animation Css. You Can See Output Project Screenshots. See Our Other Blogs And Gain Knowledge In Front-end Development.

Thank You

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

In This Post, We Learn How To Create A 3 Dot Loading Animation Css Using Simple Html & Css. If We Made A Mistake Or Any Confusion, Please Drop A Comment To Reply Or Help You In Easy Learning.

Written By – Code With Random/anki
Code By – Ricardo Oliva Alonso