<div id='preloader'>
<div id='loader' class='spinner'>
  <div id='top'></div>
  <div id='bottom'></div>
  <div id='line'></div>
</div>
</div>

#preloader{overflow:hidden;background:#DB7769;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#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:0;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:0;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:0;width:0;position:absolute;top:20px;left:20px}
@keyframes line{10%{height:20px}100%{height:20px}}