/* 
  The dynamic loading bar animation played across the top of the screen.
  This works if dynamicLinks is enabled and if <div class="keystone-page-loading"></div>
  is added to the top of the page. In the example project, this is inside basic.html
*/

$loading-bar-color: gray;
$loading-bar-thickness: 2px;
$loading-bar-speed: 30s;

.keystone-page-loading {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  height: $loading-bar-thickness;
  background: $loading-bar-color;
  animation: keystone-loading $loading-bar-speed cubic-bezier(.04,.76,.05,1.04);
}

.keystone-page-loaded {
  animation: keystone-loaded 0.2s linear !important;
  transform: translateX(0);
}

@keyframes keystone-loading {
  0% {
    transform: translateX(-100%);
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translateX(-10%);
  }
}

@keyframes keystone-loaded {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(0);
  }
}