.loader_bg{
  position: absolute;
  left: 0;
  width: calc(100%);
  height: calc(100%);
  background-color: #444;
  opacity: 0.9;
  z-index: 10;
}

.loader_bg p{
  position: absolute;
  top: calc(70%);
  left: calc(50% - 51px);
}

#loader {
  animation: loader 3s cubic-bezier(.8,0,.2,1) infinite;
  height: 100px;
  width: 101px;
  position: absolute;
  top:calc(50% - 50px);
  left:calc(50% - 50px);
}
@keyframes loader {
  90% { transform: rotate(0deg); }
  100% { transform: rotate(180deg); }
}
#top {
  animation: top 3s linear infinite;
  border-top: 50px solid #fff;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
  height: 0px;
  width: 1px;
  transform-origin: 50% 100%;
}
@keyframes top {
  90% { transform: scale(0); }
  100% { transform: scale(0);}
}
#bottom {
  animation: bottom 3s linear infinite;
  border-right: 50px solid transparent;
  border-bottom: 50px solid #fff;
  border-left: 50px 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 3s linear infinite;
  border-left: 1px dotted #fff;
  height: 0px;
  width: 0px;
  position: absolute;
  top: 50px;
  left: 50px;
}
@keyframes line {
  10% { height: 50px; }
  100% { height: 20px; }
}