<h3>CSS loader with borders</h3>
<div class="borderloader1"></div>
<div class="borderloader2"></div>
<div class="barloader1"></div>
<div class="barloader2"></div>
<div>
	Created with <span>&hearts;</span> by <a href="https://twitter.com/JesGraPa" target="_blank">@JesGraPa</a> - 
	<a href="https://codepen.io/JesGraPa/" target="_blank">More Pens</a>
	<br><br>
</div>

*{
	text-align: center;
	margin: 0;
	padding: 0;
	box-sizing:border-box;
	color:#A0BDC6;
	text-decoration: none;
}
html,body{
	background: #B0E4EB;
}
a{
	color:#599BD9;
}
h3{
	font-size: 1.8em;
	margin-top: 30px;
}
div span{
	color:#C42510;
}
div[class*="borderloader"],div[class*="barloader"]{
	margin: 50px auto;
	display: block;
}
*[class*="borderloader"]{
	width:0;
	height: 0;
	border:20px solid #F8ECF1;
	animation:borderloader infinite 0.5s linear;
	border-top-color:#FFABAB;
	box-shadow: 0 0 0 1px #F8ECF1;
}
.borderloader2{
	border-radius: 100%;
	animation:borderloader infinite 0.8s linear;
}

@keyframes borderloader{
	0%{border-color:#F8ECF1; border-top-color:#FFABAB; }
	25%{border-color:#F8ECF1; border-right-color:#FFABAB; }
	50%{border-color:#F8ECF1; border-bottom-color:#FFABAB; }
	75%{border-color:#F8ECF1; border-left-color:#FFABAB; }
}
.barloader1{
	width:0;
	height: 10px;
	border-right:100px solid #FFABAB;
	border-left:0px solid #F8ECF1;
	box-shadow: 0 0 0 1px #F8ECF1;
	animation:barloader1 infinite 1s linear;
}
@keyframes barloader1{
	0%{
		border-right:100px solid #FFABAB;
		border-left:0px solid #F8ECF1;
	}
	50%{
		border-left:100px solid #F8ECF1;
		border-right:0px solid #FFABAB;
	}


}
.barloader2{
	width:100px;
	height: 10px;
	background: #F8ECF1;
	border-right:90px solid #FFABAB;
	border-left:0px solid #FFABAB;
	box-shadow: 0 0 0 1px #F8ECF1;
	animation:barloader2 infinite 1.5s linear;
}
@keyframes barloader2{
	50%{
	border-right:0px solid #FFABAB;
	border-left:90px solid #FFABAB;
	}
}

//NO JS REQUIRED