ciao!

mi hanno chiesto di creare un loading page che poi dopo un tot di secondi si chiude con questo effetto: https://www.mattepuffo.com/DOWNLOAD/test.mp4

per creare il loading ho usato il modal di bootstrap, cambiando lo sfondo.
il sole che gira ok, ed ho fatto questo:
codice:
  <script>
    onload = (event) => {
      const lm = document.getElementById('loading_modal');
      const loadingModal = new bootstrap.Modal(lm, {
        keyboard: false
      });
      loadingModal.show();
      lm.classList.add("fade");


      setTimeout(function () {
        loadingModal.hide();
      }, 3000);
    };
  </script>


  <div id="loading_modal" class="modal" tabindex="-1">
    <div id="loading_modal_dialog" class="modal-dialog modal-fullscreen">
      <div class="modal-content">
        <div class="modal-body text-center">
          <img id="sole_modal" src="sole.svg" alt="">
        </div>
      </div>
    </div>
  </div>
funziona tutto, tranne che sinceramente non so come ottenere quell'effetto di chiusura del modal.
non sono costretto ad usare il modal di bootstrap ovviamente, ma prescindere non ho idea da iniziare!
qualche aiuto?