Javascript-форум - CSS анимация останавливается до перехода на сдругую страницу.

В верху страницы есть такая анимация, она работает с ней все хорошо.
Но когда я нажимаю на линк, для перехода на другую страницу.
Если у человека очень медленный интернет, до перехода на другую страницу, анимация в какой-то момент останавливается. На быстром интернете это не заметно. Как можно избежать такой остановки?

Код:

.loader {

  width: 100%;

  height: 3px;

  position: absolute;

  top: 0;

}

.loader:before {

                content: '';

                height: 100%;

                width: 50%;

                position: absolute;

                top: 0;

                left: 0;

                background: #F48020;

                animation: load 4s infinite;

        }

@keyframes load {

        0% {

                width: 0;

                left: -100%;

        }

        50% {

                left: 0;

                width: 100%;

        }

        100% {

                width: 0;

                left: 100%;

        }

}