<div id="loader">
  <div id="top"></div>
  <div id="bottom"></div>
  <div id="line"></div>
</div>
<h4>Loader #5</h4>

body {
  background: #DB7769; 
}
h4 {
  position: absolute;
  bottom: 20px;
  left: 20px;
  margin: 0;
  font-weight: 200;
  opacity: .5;
	font-family: sans-serif;
  color: #fff;
}
#loader {
  animation: loader 5s cubic-bezier(.8,0,.2,1) infinite;
  height: 40px;
  width: 41px;
  position: absolute;
  top:calc(50% - 20px);
  left:calc(50% - 20px);
}
@keyframes loader {
  90% { transform: rotate(0deg); }
  100% { transform: rotate(180deg); }
}
#top {
  animation: top 5s linear infinite;
  border-top: 20px solid #fff;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  height: 0px;
  width: 1px;
  transform-origin: 50% 100%;
}
@keyframes top {
  90% { transform: scale(0); }
  100% { transform: scale(0);}
}
#bottom {
  animation: bottom 5s linear infinite;
  border-right: 20px solid transparent;
  border-bottom: 20px solid #fff;
  border-left: 20px solid transparent;
  height: 0px;
  width: 1px;
  transform: scale(0);
  transform-origin: 50% 100%;
}
@keyframes bottom {
  10% { transform: scale(0); }
  90% { transform: scale(1); }
  100% { transform: scale(1); }
}
#line {
  animation: line 5s linear infinite;
  border-left: 1px dotted #fff;
  height: 0px;
  width: 0px;
  position: absolute;
  top: 20px;
  left: 20px;
}
@keyframes line {
  10% { height: 20px; }
  100% { height: 20px; }
}