
@use "../globals/" as *;
@use "../util/" as *;

.top-loading-bar.active{
    position: fixed;
    top: 0;
    width: 100vw;
    height: 2px;
    z-index: $top-loading-bar-zindex;
    background-color: transparent;
    
  }

  .top-loading-bar.active:before{ 
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--bg-core-primary-dark);
    transform-origin: left;
    animation: animate 4s linear infinite;
  } 

  @keyframes animate {  
    0%,20%{
        transform: scaleX(0);
    }
    40%{
      transform: scaleX(1);
      transform-origin: left;
    }
    40.000001%,60%{
    transform: scaleX(1);
    transform-origin: right;
    }
    80%,100%{
    transform: scaleX(0);
    transform-origin: right;
    }
}