A Pen by Franklin Javier.

index.jade

.wrap 
  .loader.effect1
.wrap 
  .loader.effect2

Loader-experiment.markdown

Loader experiment

A Pen by Franklin Javier on CodePen.

License.

style.css

body { background: #1e2426; }

.wrap { 
  margin: 10px; 
  width: 100px; 
  height: 100px; 
  float: left;
  position: relative;
}

.loader {
    width: 50px;
    height: 50px;
    margin: 3em;
    position: absolute;
    border: 3px solid #6C6;
}

.loader:before,
.loader:after {
    width: 100%; 
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
}

.effect1 { animation: effect1 1s infinite ease-in-out; }

@keyframes effect1 {
  0% { transform: rotate(0deg); border-radius: 50%; }
  50% { transform: rotate(90deg); border-radius: 10%; }
  100% { transform: rotate(180deg); border-radius: 50%; }
}


.effect2 { animation: effect2 1s infinite ease-in-out; }

@keyframes effect2 { 
  0% { transform: rotate(0deg); border-radius: 50%; }
  50% { 
    transform: rotate(90deg); 
    border-radius: 0%; 
    width: 2px; 
    height: 2px; 
    opacity: 0; 
    margin: 70px;
  }
  100% { transform: rotate(180deg); border-radius: 50%; }
}