Atomic CSS Loader

Atomic CSS Loader

HTML Code


<!DOCTYPE html>
<html>
	<head>
	<link rel="stylesheet" href="main.css">
	<title>Atomic CSS Loader</title>
	</head>
	
	<body>
     <div class="loader">
     	<span class="atomic a1"></span>
     	<span class="atomic a2"></span>
     	<span class="atomic a3"></span>
     </div>
	</body>
</html>

CSS Code

body {
  background: #3c4a4f;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loader {
  width: 200px;
  height: 200px;
  position: relative;
}
.loader .atomic {
  width: 20px;
  height: 20px;
  border: 1px solid #fff;
  position: absolute;
  border-radius: 50%;
  background: #fff;
}
.a1 {
  top: 50px; left: 90px;
  animation: a1 2.5s ease infinite;
}
.a2 {
  top: 120px; left: 40px;
  animation: a2 2.5s ease infinite;
}
.a3 {
  top: 120px; left: 138px;
  animation: a3 2.5s ease infinite;
}

@keyframes a1 {
  0%, 100% {top: 50px; left: 90px;}
  35% {top: 120px; left: 138px;}
  70% {top: 120px; left: 40px;}
}
@keyframes a2 {
  0%, 100% {top: 120px; left: 40px;}
  35% {top: 50px; left: 90px;}
  70% {top: 120px; left: 138px;}
}
@keyframes a3 {
  0%, 100% {top: 120px; left: 138px;}
  35% {top: 120px; left: 40px;}
  70% {top: 50px; left: 90px;}
}
  
Comments are closed.