<!-- standard loading spinner -->
<div class="spinner"></div>

<!-- Large version -->
<div class="spinner large"></div>
body {
  background-color: #222;
  padding-top: 20px;
}
div.spinner {
  height: 21px;
  width: 21px;
  margin: 20px auto;
  border-radius: 50%;
  border: dashed 1px #D0CE03;
  animation-name: loader-spin;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  
  &.large {
    width: 43px;
    height: 43px;
    border-width: 3px;
  }
}
@-webkit-keyframes loader-spin {
  from   {  transform: rotate(0deg); }
  to     {  transform: rotate(360deg); }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.