<div id="container">
  <div id="loader"></div>  
</div>
<h4>Loader #4</h4>
body {
  background: rgb(235, 205, 86);
}
h4 {
  position: absolute;
  bottom: 20px;
  left: 20px;
  margin: 0;
  font-weight: 200;
  opacity: .5;
	font-family: sans-serif;
  color: #fff;
}
#container {
  width: 70px;
  height: 35px;
  overflow: hidden;
  position: absolute;
  top: calc(50% - 17px);
  left: calc(50% - 35px);
}
#loader {
  width: 70px;
  height: 70px;
  border-style: solid;
  border-top-color: #FFF;
  border-right-color: #FFF;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  box-sizing: border-box;
  animation: rotate 3s ease-in-out infinite;
  transform: rotate(-200deg)
}
@keyframes rotate {
  0% { border-width: 10px; }
  25% { border-width: 3px; }
  50% { 
    transform: rotate(115deg); 
    border-width: 10px;
  }
  75% { border-width: 3px;}
  100% { border-width: 10px;}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://codepen.io/fbrz/pen/9a3e4ee2ef6dfd479ad33a2c85146fc1.js