CSS Loader

by Anshul Pandey

HTML

<div class="rtloader">
  <span class="topleft"></span>
  <span class="topright"></span>
  <span class="botleft"></span>
  <span class="botright"></span>
</div>

CSS

.rtloader{
  width:200px;
  height:200px;
  position:relative
}
.rtloader span{
  width:50%;
  height:50%;
  display:block;
  position:absolute;
  opacity:0.8
}
.rtloader span.topleft{
  border-radius: 100% 0 0 0;
  background-color:#ec5959;
  left:0;
  top:0;
  animation: rotate 2s infinite linear;
  transform-origin: 100% 100%;
}
.rtloader span.topright{
  border-radius: 0 100% 0 0;
  background-color:#66527f;
  right:0;
  top:0;
  animation: rotate 3s infinite linear;
  transform-origin: 0 100%;
}
.rtloader span.botleft{
  border-radius: 0 0 0 100%;
  background-color:#61cca8;
  left:0;
  bottom:0;
  animation: rotate 2.5s infinite linear;
  transform-origin: 100% 0;
}
.rtloader span.botright{
  border-radius: 0 0 100% 0;
  background-color:#60a9e0;
  right:0;
  bottom:0;
  animation: rotate 1.5s infinite linear;
  transform-origin: 0 0;
}
@keyframes rotate{
  0%{ transform: rotate(0deg) }
  100%{ transform: rotate(360deg) }
}