Animated Loader

<html lang="en" dir="ltr">
 <head>
 <meta charset="UTF-8">
<style>

*{
  margin:0;
  padding: 0;
  box-sizing: border-box;
}
section{
  display: flex;
  height: 100vh;
  width: 100%;
  align-items: center;
  justify-content: center;
  background: #4070f4;
}
section .dots span{
  position: absolute;
  height: 10px;
  width: 10px;
  background: #fff;
  border-radius: 60%;
  transform: rotate(calc(var(--i) * (360deg / 15))) translateY(35px);
  animation: animate 1.5s linear infinite;
  animation-delay: calc(var(--i) * 0.1s);
  opacity: 0;
}
@keyframes animate {
 0%{
   opacity: 1;
 }
 100%{
   opacity: 0;
 }
}

</style>
 </head>
<body>
 <section>
 <div class="dots">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 </div>
 </section>
</body>
</html>

demo

Code Preview

Popular Posts

Pages

Animated Loader