:host {
    position: fixed;
    top: 0px;
    width: 100%;
}

.loading-bar { 
    width:100%; 
    margin:0 auto;
    position: absolute;
    background-color: var(--color--primary-300, #e2f4ef);
    height: 5px;
}

.loading-bar:before {
    content:'';
    position:absolute;
}

.loading-bar__container { 
    position:absolute;
    top:0;
    right:100%;
    bottom:0;
    left:0;
    background-color: var(--color--primary, #008561); 
    width:0;
    animation: loading 2s linear infinite;
}
  
@keyframes loading {
    0% {
        left:0%;
        right:100%;
        width:0%;
    }
    25% {
        left:0%;
        right:75%;
        width:25%;
    }
    50% {
        left:0%;
        right:50%;
        width:90%;
    }
    70% {
        right:0%;
        left:75%;
        width:25%;
    }
    100% {
        left:100%;
        right:0%;
        width:0%;
    }
}

@-webkit-keyframes loading {
    0% {
        left:0%;
        right:100%;
        width:0%;
    }
    25% {
        left:0%;
        right:75%;
        width:25%;
    }
    50% {
        left:0%;
        right:50%;
        width:90%;
    }
    70% {
        right:0%;
        left:75%;
        width:25%;
    }
    100% {
        left:100%;
        right:0%;
        width:0%;
    }
}