cocentric-circle.css

body{
	padding: 0;
	margin: 0;
	background: #060606;
}

.loader{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 200px;
	height: 200px;
	box-sizing: border-box;
}

.loader .face{
  position: absolute;
  border:2px solid #121212;
}

.loader .face.face1{
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #090909;
	box-shadow:0 0 10px rgba(0,0,0,1);
  	border-radius: 50%;
  	border-left: 2px solid #CD5C5C;
  	border-top: 2px solid #CD5C5C;
  	animation: ani1 3s linear infinite;
}

.loader .face.face2{
	top: 30px;
	left: 30px;
	right: 30px;
	bottom: 30px;
	background: #090909;
	box-shadow:0 0 10px rgba(0,0,0,1);
  	border-radius: 50%;
  	border-right: 2px solid #DC143C;
  	border-bottom: 2px solid #DC143C;
  	animation: ani2 3s linear infinite;
}

.loader .face .circle{
	position: absolute;
	top: calc(50% - 1px);
	left: 50%;
	width: 50%;
	height: 2px;
	transform-origin: left;
}

.loader .face.face1 .circle{
  transform: rotate(-45deg);
}
.loader .face.face2 .circle{
  transform: rotate(-45deg);
}

.loader .face .circle:before{
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
  top: -4px;
  right: -6px;
}

.loader .face.face1 .circle:before{
  background:#CD5C5C;
  box-shadow: 0 0 20px #CD5C5C,0 0 40px #CD5C5C,0 0 60px #CD5C5C,0 0 80px #CD5C5C,
  0 0 100px #CD5C5C,0 0 0 5px rgba(255,255,0,.1);
}

.loader .face.face2 .circle:before{
  background:#DC143C;
  box-shadow: 0 0 20px #DC143C,0 0 40px #DC143C,0 0 60px #DC143C,0 0 80px #DC143C,
  0 0 100px #DC143C,0 0 0 5px rgba(3,169,244,.1);
}

@keyframes ani1{
  0%{
    transform:rotate(0deg);
  }
  100%{
    transform:rotate(360deg);
  }
}
@keyframes ani2{
  0%{
    transform:rotate(0deg);
  }
  100%{
    transform:rotate(-360deg);
  }
}