.main-progress-bar-container
    height: 7px
    width: 100%

.main-progress-bar-container
    position: fixed
    bottom: 0px

.phanterpwa-main_progressbar-wrapper
    display: none
    >.phanterpwa-main_progressbar
        margin: 0px
        height: 10px
        position: relative
        display: block
        width: 100%
        background-color: #acece6
        border-radius: 2px
        background-clip: padding-box
        overflow: hidden 
        .phanterpwa-main_progressbar-movement
            background-color: $components 
            &:before
                content: ''
                position: absolute
                background-color: inherit
                top: 0
                left: 0
                bottom: 0
                will-change: left, right
                -webkit-animation: none
                animation: none
            &:after
                content: ''
                position: absolute
                background-color: inherit
                top: 0
                left: 0
                bottom: 0
                will-change: left, right
                -webkit-animation: none
                animation: none
                -webkit-animation-delay: 1.15s
                animation-delay: 1.15s 
    &.enabled
        display: block
        >.phanterpwa-main_progressbar
            .phanterpwa-main_progressbar-movement
                background-color: $components 
                &:before
                    -webkit-animation: phanterpwa_progressbar-movement 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite
                    animation: phanterpwa_progressbar-movement 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite 
                &:after
                    -webkit-animation: phanterpwa_progressbar-movement-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite
                    animation: phanterpwa_progressbar-movement-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite
                    -webkit-animation-delay: 1.15s
                    animation-delay: 1.15s 


@-webkit-keyframes phanterpwa_progressbar-movement
    0%
        left: -35%
        right: 100% 

    60%
        left: 100%
        right: -90% 

    100%
        left: 100%
        right: -90% 


@keyframes phanterpwa_progressbar-movement
    0%
        left: -35%
        right: 100% 

    60%
        left: 100%
        right: -90% 

    100%
        left: 100%
        right: -90% 


@-webkit-keyframes phanterpwa_progressbar-movement-short
    0%
        left: -200%
        right: 100% 

    60%
        left: 107%
        right: -8% 

    100%
        left: 107%
        right: -8% 


@keyframes phanterpwa_progressbar-movement-short
    0%
        left: -200%
        right: 100% 

    60%
        left: 107%
        right: -8% 

    100%
        left: 107%
        right: -8% 

