body {
  margin: 0;
  margin-top: 20%;
}
.animated {
    -webkit-animation-duration: 2.5s;
    animation-duration: 2.5s;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

.yt-loader {
    -webkit-animation-name: horizontalProgressBar;
    animation-name: horizontalProgressBar;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    background: #3498db;
    height: 5px;
    left: 0;
    top: 0;
    width: 0%;
    z-index: 9999;
    position:relative;
}

.yt-loader:after{
  display: block;
  position: absolute;
  content:'';
  right: 0px;
  width: 100px;
  height: 100%;
  opacity: 0.5;
}
@keyframes horizontalProgressBar
{
    0%   {width: 0%;}
    20%  {width: 10%;}
    30%  {width: 15%;}
    40%  {width: 18%;}
    50%  {width: 20%;}
    60%  {width: 22%;}
    100% {width: 100%;}
}

.box1 {
border: 1px solid #f3f3f3;
padding: 0;
width: 400px;
height: 100%;
margin: auto;
border-radius: 5px;
overflow:hidden;
}