CSS circular progress indicator (http://codepen.io/anon/pen/jbgOrr?editors=110)

index.html

<style>
// Theming/Styling
.progress {
  width: 100px;
  height: 100px;
}

.progress .fill {
  border: 8px solid orange;
  width: calc(100% - 8px);
  height: calc(100% - 16px);
  border-right: none;
}
</style>
<div class="progress alternate">
  <div class="left">
    <div class="fill"></div>
  </div>
  <div class="right">
    <div class="fill"></div>
  </div>
</div>

progress.scss

.progress {
  & .left, & .right {
    width: 50%;
    height: 100%;
    overflow: hidden;
    float: left;
  }
  
  & .right {
    transform: matrix(-1, 0, 0, -1, 0, 0);
  }
  
  & .fill {
    width: 100%;
    height: 100%;
    border-top-left-radius: 100% 50%;
    border-bottom-left-radius: 100% 50%;
    transform-origin: 100% 50%;
    animation: 1s infinite linear;
  }

  & .left .fill {
    animation-name: progress-left;
  }
  
  & .right .fill {
    animation-name: progress-right;
  }
}

.progress.alternate {
  & .fill {
    animation-duration: 2s;
  }
    
  & .right .fill {
    animation-name: progress-right-alternate;
  }

  & .left .fill {
    animation-name: progress-left-alternate;
  }
}

@keyframes progress-left {
  from { transform: rotate(-180deg); }
  50%  { transform: rotate(-180deg); }
  to   { transform: rotate(0); }
}

@keyframes progress-right {
  from { transform: rotate(-180deg); }
  50%  { transform: rotate(0); }
  to   { transform: rotate(0); }
}

@keyframes progress-left-alternate {
  from { transform: rotate(-180deg); }
  25%  { transform: rotate(-180deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(0deg); }
  to   { transform: rotate(180deg); }
}

@keyframes progress-right-alternate {
  from { transform: rotate(-180deg); }
  25%  { transform: rotate(0); }
  50%  { transform: rotate(0); }
  75%  { transform: rotate(180deg); }
  to   { transform: rotate(180deg); }
}