You are currently viewing 3 Dot Loading Animation Using HTML & CSS

3 Dot Loading Animation Using HTML & CSS

3 Dot Loading Animation Using HTML & CSS

3 Dot Loading Animation Using HTML & CSS
3 Dot Loading Animation Css

 

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

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>

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

3 Dot Loading Animation Css
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%; }
}

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 Css

 3 Dot Loading Animation Css
3 Dot Loading Animation Css

 

 3 Dot Loading Animation Css
3 Dot Loading Animation Css

 

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+ Front-end Projects for Web developers (Source Code)

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

Leave a Reply