<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;}
}
This Pen doesn't use any external CSS resources.