.loading-page {
  width: 100vw;
  height: 100vh;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
    justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}
.loading-page .counter {
  text-align: center;
}
.loading-page .counter p {
    font-size: 20px;
    font-weight: 100;
    color: #0168fa;
    margin: 10px 0 50px 0;
}
.loading-page .counter h1 {
  color: #0d0d0d;
  font-size: 40px;
  margin: 0;
margin-top: 40px;
}
.loading-page .counter .l_bar {
    background: #0168fa;
    height: 2px;
    border-radius: 3px;
    transition: all 0.5s;
}
.loading-page .counter {
  position: relative;
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.loading-page .counter h1.abs {
  position: absolute;
  top: 0;
  width: 100%;
}
.loading-page .counter .color {
  width: 0px;
  overflow: hidden;
  color: #0168fa;
}


.boxLoading {
  width: 50px;
  height: 50px;
position: relative;
}
.boxLoading:before {
  content: '';
  width: 50px;
  height: 5px;
  background: #000;
  opacity: 0.1;
  position: absolute;
  top: 59px;
  left: 0;
  border-radius: 50%;
  animation: shadow 0.5s linear infinite;
}
.boxLoading:after {
  content: '';
  width: 50px;
  height: 50px;
  background: #0168fa;
  animation: animate 0.5s linear infinite;
  /* box-shadow: 0 0 15px 0px rgba(0,0,0,0.30); */
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 6px;
}
@keyframes animate {
  17% {
    border-bottom-right-radius: 6px;
  }
  25% {
    transform: translateY(9px) rotate(22.5deg);
  }
  50% {
    transform: translateY(18px) scale(1, 0.9) rotate(45deg);
    border-bottom-right-radius: 40px;
  }
  75% {
    transform: translateY(9px) rotate(67.5deg);
  }
  100% {
    transform: translateY(0) rotate(90deg);
  }
}
@keyframes shadow {
  0%,
  100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1);
  }
}