I have this css code I'm trying to make work in safari, (it's a top progress bar loader) it works everywhere else but there:

.page-loading::before {
    content:" ";
    display:block;
    position:fixed;
    z-index:10;
    height:2px;
    width:100%;
    top:300px;
    left:0;
    background-color:#06D;
    animation: page-load infinite ease-out 2s;
    box-shadow:0 2px 2px rgba(0,0,0,.2);
}

@keyframes page-load {
    from {
        background-color: #ffc422;
    }
    to {
        background-color: #c0392b;
    }
}

(This is the js code I use to load it if this is important)

    window.addEventListener("beforeunload",function(e){
    document.body.className = "page-loading";
},false);
    

It works perfectly in all browsers, but for some reason it doesn't load anywhere in safari. Is there a reason this doesn't work/some type of webkit I can add to it/any errors