How to create MultiCircle Preloading screen using HTML and CSS3

Creating Preloader screen with CSS is pretty easy due to added animation to them. CSS also unlock lots of designing opportunity by providing lot of psuedo-elements like :before, :after etc.

Steps required to create css preloader

• A web page (Hypertext Markup Language page)
• Cascading Style Sheet (CSS)
• Additionally, JavaScript can be used for hiding the preloading screen after page completes its loading.

HTML

<div class="overlay">
 <div class="spinner">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
 </div>
</div>

CSS

body{
 margin: 0;
 padding: 0;
}

.overlay{
 width: 100%;
 height: 100vh;
 background-color: #fff;
 animation: bgchange 2s infinite ease-in-out;
}

.spinner span{
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 height: 100px;
 width: 100px;
 border: 2px solid #555;
 border-top: 2px solid transparent;
 border-bottom: 2px solid transparent;
 border-radius: 50%;
 animation: rotate360 2s infinite ease-in-out;
}

.spinner span:nth-child(1){
 height: 50px;
 width: 50px;
 border-left: 2px solid #FC7670;
 border-right: 2px solid #FC7670;
 animation-delay: 0.8s;
}

.spinner span:nth-child(2){
 height: 70px;
 width: 70px;
 border-left: 2px solid #EBD793;
 border-right: 2px solid #EBD793;
 animation-delay: 0.6s;
 animation-direction: reverse;
}

.spinner span:nth-child(3){
 height: 90px;
 width: 90px;
 border-left: 2px solid #6ED1B7;
 border-right: 2px solid #6ED1B7;
 animation-delay: 0.4s;
}

.spinner span:nth-child(4){
 height: 110px;
 width: 110px;
 border-left: 2px solid #38A484;
 border-right: 2px solid #38A484;
 animation-delay: 0.2s;
 animation-direction: reverse;
}

.spinner span:nth-child(5){
 height: 130px;
 width: 130px;
 border-left: 2px solid #365050;
 border-right: 2px solid #365050;
}

@keyframes rotate360{
 0%{
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
  -webkit-transform: translate(-50%, -50%) rotate(0deg) scale(1);
  -moz-transform: translate(-50%, -50%) rotate(0deg) scale(1);
  -o-transform: translate(-50%, -50%) rotate(0deg) scale(1);
  -ms-transform: translate(-50%, -50%) rotate(0deg) scale(1);
 }
 
 50%{
  transform: translate(-50%, -50%) rotate(180deg) scale(1.2);
  -webkit-transform: translate(-50%, -50%) rotate(180deg) scale(1.2);
  -moz-transform: translate(-50%, -50%) rotate(180deg) scale(1.2);
  -o-transform: translate(-50%, -50%) rotate(180deg) scale(1.2);
  -ms-transform: translate(-50%, -50%) rotate(180deg) scale(1.2);
 }
 
 100%{
  transform: translate(-50%, -50%) rotate(360deg) scale(1);
  -webkit-transform: translate(-50%, -50%) rotate(360deg) scale(1);
  -moz-transform: translate(-50%, -50%) rotate(360deg) scale(1);
  -o-transform: translate(-50%, -50%) rotate(360deg) scale(1);
  -ms-transform: translate(-50%, -50%) rotate(360deg) scale(1);
 }
}

@keyframes bgchange{
 0%{
  background-color: #eee;
 }
 
 50%{
  background-color: #fff;
 }
 
 100%{
  background-color: #eee;
 }
}

JavaScript

window.onload = function(){
    document.getElementsByClassName("overlay")[0].style.display = "none";
/* [0] <= coz. we are considering overlay class for loader is at index 0 or first position */
};

Demo and code

• Demo: Codepen
• Full Code: Codepen