Css Loading Dots | 3 Dot Loading Animation Css - Codewithrandom

Welcome🎉 to Code With Random blog. In this blog, we learn how to create a Css Loading Dots. We use HTML & CSS  for Css Loading Dots. Hope you enjoy our blog so let's start with a basic HTML structure for the Css Loading Dots. 

HTML code

 <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 Css Loading Dots. Now, you can see output without CSS, then we write CSS for the Css Loading Dots.

Output

Blank Output with Blank Html Tag

CSS code

 *{  
      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 section,  Here is our final updated output CSS.

Final Output

Now we have completed our CSS section,  Here is our updated output with CSS. Hope you like the Css Loading Dots, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create a Css Loading Dots 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

Check out more.....

1. How to design HTML Loader using HTML CSS JAVASCRIPT

2. Simple CSS loaders | 8+ Easy Css loaders with only Html 

3. Circular Progress Bar using HTML,CSS and Javascript - Codewithrandom