.loader
	.circle
	.circle
	.circle
	.circle
	.circle
View Compiled
body { 
	background: #111;
}

.loader {
  position: relative;
  padding-top: 100px;
  width: 40px;
  margin: auto;

  .circle {
    position: absolute;
    width: 38px;
    height: 38px;
    opacity: 0;
    transform: rotate(225deg);
    animation-iteration-count: infinite;
    animation-name: orbit;
    animation-duration: 5.5s;
    
    &:after {
      content: '';
      position: absolute;
      width: 5px;
      height: 5px;
      border-radius: 5px;
      background: #fff; /* Pick a color */
    }
    
    &:nth-child(2) {  animation-delay: 240ms; }
    &:nth-child(3) {  animation-delay: 480ms; }
    &:nth-child(4) {  animation-delay: 720ms; }
    &:nth-child(5) {  animation-delay: 960ms; }
  }
}

@keyframes orbit { 
  0%   { transform:rotate(225deg); opacity: 1;
         animation-timing-function: ease-out; } 
    
  7%   { transform:rotate(345deg);
         animation-timing-function: linear; }
    
  30%   { transform:rotate(455deg);
          animation-timing-function: ease-in-out; }
    
  39%   { transform:rotate(690deg);
          animation-timing-function: linear; }
    
  70%   { transform:rotate(815deg); opacity: 1;
         animation-timing-function: ease-out; }
    
  75%   { transform:rotate(945deg); 
         animation-timing-function: ease-out; }
    
  76% { transform:rotate(945deg); opacity: 0; }
  100% { transform:rotate(945deg); opacity: 0; } 
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://github.com/weepy/jquery.path/raw/master/jquery.path.js