Single element 4 Segment Spinner

by dswitzer

HTML

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

SCSS

$bg-main: #fff !default;
$green: #6ec000 !default;

.spinner {
  width: 160px;
  height: 160px;
  display: block;
  position: relative;

	&:after {
		content: " ";
		display: block;
		position: absolute;
		bottom: 1.4em;
		left: 50%;
		margin-left: -40px;
		width: 80px;
		height: 80px;
    background: $bg-main;
		border-radius: 50%;
		border: 10px solid $green;
//		border-color: $green transparent $green transparent;
    
    // new styles
    z-index: 1;
    box-sizing: border-box;
	}
	&:before {
		content: " ";
		display: block;
		position: absolute;
    box-sizing: border-box;
		bottom: 1.4em;
		left: 50%;
		margin-left: -41px;
    margin-bottom: -1px;
		width: 82px;
		height: 82px;
		will-change: transform;
    // we create a "cross" which splits the segments
    background: linear-gradient(to bottom, transparent 40%, $bg-main 40%, $bg-main 60%,  transparent 60%),
    linear-gradient(to right, transparent 40%, $bg-main 40%, $bg-main 60%, transparent 60%);
    z-index: 2;
		animation: ani-spinner-dual-ring 1.75s linear infinite;
  }
  
}

@keyframes ani-spinner-dual-ring {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}