<div class="spinner"></div>

@green-lime: #8dc153;
@blue: #3baeda;
@orange: #f6bb43;
@gray: #434a54;
@red: #db4453;

body{
  background: #fff;
  text-align: center;
}

.spinner{
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: 100px auto;
  border-radius: 50%;
  position: relative;
  box-sizing: border-box;
  border-top: 5px solid @blue;
  border-right: 5px solid @orange;
  border-bottom: 5px solid @red;
  border-left: 5px solid @green-lime;
  -webkit-animation: myspin 1s ease infinite;
  animation: myspin 1s ease infinite;
  
  &:after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -28px;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    border-top: 3px solid rgba(0,0,0,0);
    border-right: 3px solid rgba(0,0,0,0);
    border-bottom: 3px solid rgba(0,0,0,0);
    border-left: 3px solid @gray;
    animation: myspin 1s reverse ease infinite;
    box-sizing: border-box;
  }
}

@-webkit-keyframes myspin {
  from {
    -webkit-transform:rotate(0deg);
  }
  
  to {
    -webkit-transform:rotate(360deg);
  }
}
@keyframes myspin {
  from {
    -webkit-transform:rotate(0deg);
  }
  
  to {
    -webkit-transform:rotate(360deg);
  }
}