Show loader while navigating to other page

I want to show loader/spinner while clicking on anchor tag for another page navigation

Things I tried:

1. 
window.addEventListener('pagehide', function (event) {
    $('.ajax-loader-container').show();
});

2. 
window.addEventListener('DOMNodeInserted', function (e) {
    $('.ajax-loader-container').show()
});

3.
document.addEventListener('readystatechange', function(e) {
    var current_state = document.readyState
    if (current_state == 'interactive') {
        $('.ajax-loader-container').show()
    }  else if (current_state == 'complete') {
        $('.ajax-loader-container').hide()
    }
});

2&3 works but with a delay as the loader appears after loading the html

I cant use beforeunload as it doesn’t work in Safari and iphone