Cacher is the code snippet organizer for pro developers

<span class="spinner spinnerone"></span>
<span class="spinner spinnertwo"></span>

body {
  background: skyblue;
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    tranform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    tranform: rotate(360deg);
  }
}

.spinner {
  border: 6px solid rgba(255, 255, 255, 0.4);
  width: 40px;
  height: 40px;
  border-radius: 50px;
  display: inline-block;
  position: relative;
}

.spinner:after {
  top: -6px;
  right: -6px;
  bottom: -6px;
  left: -6px;
  border-width: 6px;
  border: 6px solid transparent;
  border-top-color: white;
}

.spinner:after {
  content: '';
  position: absolute;
  border-radius: 50px;
  animation: spin 1s linear infinite;
}

.spinnertwo {
  border: 3px solid rgba(255, 255, 255, 0.4);
  width: 20px;
  height: 20px;
}

.spinnertwo:after {
  top: -3px;
  right: -3px;
  bottom: -3px;
  left: -3px;
  border-width: 3px;
  border: 3px solid transparent;
  border-top-color: white;
}

// ----
// libsass (v3.2.5)
// ----

body {
  background: skyblue;
}


// Define keyframes
@keyframes spin {
	0%{ -webkit-transform: rotate(0deg); tranform: rotate(0deg);}
	100%{ -webkit-transform: rotate(360deg); tranform: rotate(360deg);}
}

// Spinner Mixin to allow for variations in size and width
@mixin spinner($size: 40px, $border-width: 6px) {
	border: $border-width solid rgba(white,0.4); // make the background of the circular spinner transparent white
	width: $size;
	height: $size;
	&:after {
		// align spinning portion with the border
		top: -$border-width;
		right: -$border-width;
		bottom: -$border-width;
		left: -$border-width;
		// make sure the borders are the same size
		border-width: $border-width;
		border: $border-width solid transparent;
		border-top-color: white;
	}
}

// Spinner element
.spinner {
	@include spinner(); // default size and border-radius. re-include elsewhere if you want to override.

	border-radius: 50px; // make the spinner circular
	display: inline-block; // force it to display even though it's a span
	position: relative; // to allow the :after to align properly
  
	&:after {
		content: '';
		position: absolute;
		border-radius: 50px; // make circular
		animation: spin 1s linear infinite; // run the animation
	}
}

.spinnertwo {
 @include spinner(20px, 3px); 
}

<span class="spinner spinnerone"></span>
<span class="spinner spinnertwo"></span>