Отображение экрана загрузки в модальном режиме при загрузке PDF

Question

У меня есть кнопка, которая при щелчке открывает модал и загружает PDF для отображения в модальном теле через <iframe>. Это хорошо работает, но некоторые PDF-файлы большие и занимают пару секунд для загрузки. Я хочу реализовать загрузочный экран в модальном div, пока iframe загружает PDF. У кого-нибудь есть рекомендации как это сделать? Я пытался играть с парой плагинов, но безуспешно.

//This function opens PDF modals

    function ub(id) {
        let pdfFrame = document.getElementById("iframesource");
        let loadFrame = document.getElementById("loader");
        pdfFrame.src = id;
        $('#modal-notification').modal('show');

        if(!pdfFrame.src) {
            loadFrame.style.display = "inline-block";
            pdfFrame.style.display = "none";
        } else {
            loadFrame.style.display = "none";
            pdfFrame.style.display = "block";
        }
    }

Это модальное тело, в котором iframe и загрузка загружаются:

<div class="modal-body">
    <div id="loader" class="lds-ellipsis">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <iframe frameborder="0" id="iframesource"></iframe>
</div>

Это кнопка, которая нажимает, чтобы открыть модальное: