I wan't to show a loader when I switch page on my website. So I define a loader in my HTML:

```
<div class="ajax-loader"><i class="icon-spin5"></i></div>

```

And in my CSS:

```
.ajax-loader {
    z-index: 1;
    position: fixed;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    color: white;
    opacity: 0;
    pointer-events: none;
    transition: all ease-in-out .25s;

    i {
        display: inline-block;
        font-size: 80px;
        width: 80px;
        height: 80px;
        animation: spin 3s linear infinite;

        @media @step1, @step2 {
            font-size: 2em;
        }
    }

    &.active {
        opacity: 1;
    }
}

```

And in my JS:

```
$(document).ready(function() {
    // loader on page change
    window.onbeforeunload = function(e) {
        // show ajax loader
        $('.ajax-loader').addClass('active');
    };
});

```

All is fine, in IE, Firefox, Chrome... but not in Safari (Mac + iOS).

Any idea ?  

Thanks !