<div class="loader"></div>

* { box-sizing: border-box; }

body {
  background-color: black;
  color: white;
}

.loader {    
  height: 50px;
  margin: 10%;
  padding: 5px;
  position: relative;
  width: 50px;
  
  &:before,
  &:after {
    border: 2px solid white;
    content: "\0020";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
  
  &:before {
    z-index: 1;
    animation: tiny-pulse 3s infinite 1s alternate;
  }
  
  &:after {
    animation: pulse 3s infinite 1s alternate;
    z-index: 2;
  }
}

@keyframes tiny-pulse {
  
  50% {
    border-color: pink;
    transform: rotate( -90deg );
  }
  
  100% {
    transform: rotate(-135deg);
  }
  
}

@keyframes pulse {

  50% {
    opacity: 1;
    transform: rotate( 45deg );
  }
  
  100% {
    transform: rotate( 90deg );
  }
}