Check if download is already done and hide loader

I have a functionality in my project that allows the user to download pdf file. I can now download but since pdf files are a bit heavy, I'm showing them a download progress gif and my problem now is how can I hide it after downloading since I'm not using ajax download functionality. This is how I do it.

 <div class="col-sm-4">
    <a type="button" href="#" data-href=""
        class="btn btn-block btn-secondary custom-font-button download-pdf">@lang('guest.pdf')</a>
</div>

jquery

 $(document).on('click','.download-pdf', function(){
    let reservation_id  = $('#reservation_id').val();
    let account_name  =  $('#account_name').val();

    var a = $(this).data('href');
    $(this).attr('href', a
                + '&reservation_id=' + reservation_id
                + '&account_name=' + account_name);

    $('body').addClass('show-loading');
    //remove the loading after download
});

CSS

body.show-loading img[role=loading-circ-display] {
    display: block;
}
body.show-loading:before {
    content: "";
    background-color: black;
    opacity: 0.5;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

PS: If you have better ideas or suggestions, I'm open to it.

via Chebli Mohamed