<!--
My single-div attempt to replicate this CSS loader: https://codepen.io/wifeo/pen/FBpJq

This version is done using pseudo-elements and box-shadow animations only.

Update: Some variations commented inside the .loader class
-->

<div class="loader"></div>
@color-1: #00a7ce;
@color-2: #72c45a;
@color-3: #f963a3;
@color-4: #ffd15b;

@ball-size: 20px;
@jump: .75em;
@diam: 2 * @jump;

@duration: 1.2s;

.loader {
  position: relative;
  width: 0;
  height: 0;
  margin: 4em auto;
  animation: anim-rotate @duration infinite ease;
  
  /* Variations */
  //animation: anim-rotate @duration infinite linear;
  //animation: anim-rotate @duration infinite cubic-bezier(.1,.3,.3,.1);
  //animation: anim-rotate @duration linear infinite alternate;
  //animation: anim-rotate 0 infinite;
  
  &:before,
  &:after {
    content: '';
    position: absolute;
    width: @ball-size;
    height: @ball-size;
    top: 50%;
    left: 50%;
    margin-top: -@ball-size/2;
    margin-left: -@ball-size/2;
    border-radius: @ball-size/2;
    opacity: .9;
  }
  
  &::before {
    background: @color-1;
    transform: translate(-@jump, -@jump) 
               scale(1);
    box-shadow: @diam @diam 0 @color-2;
    animation: anim-1-2 @duration infinite ease;
  }
  
  &:after {
    background: @color-3;
    transform: translate(@jump, -@jump) 
               scale(1);
    box-shadow: -@diam @diam 0 @color-4;
    animation: anim-3-4 @duration infinite ease;
  }
}

@keyframes anim-1-2 {
  50% {
    transform: scale(1.3) translate(0, 0);
    box-shadow: 0 0 0 @color-2;
    opacity: .8;
  }
}

@keyframes anim-3-4 {
  50% {
    transform: scale(1.3) translate(0, 0);
    box-shadow: 0 0 0 @color-4;
    opacity: .8;
  }
}

@keyframes anim-rotate {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(360deg); }
  100% { transform: rotate(720deg); }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.