Logo while page is loading

Hi guys!

I would like help for my website on this:

While the people access to the website I want the logo to show in the "loading page" for all pages.

I appreciate the help

Thank you!

Something like this example?

https://tuanphan3.squarespace.com/logo-loading-screen?noredirect

pass: abc

Code I used

<div class="site-loader"><div class="loader-logo"><img src="https://images.squarespace-cdn.com/content/v1/65a1dc39ac3fba1c19dbb1ad/f92718d8-ccfc-46e2-8865-af92af4a8679/LOGO+%28500+%C3%97+375+px%29.png?format=1500w" />
  <div class="snippet" data-title="dot-pulse">
          <div class="stage">
            <div class="dot-pulse"></div>
          </div>
        </div>
  </div>
</div>
<style>
.site-loader {
    background-color: #9b570a;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.site-loader img {
    max-width: 300px;
}
  .dot-pulse {
  position: relative;
  left: -9999px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #fff;
  color: #fff;
  box-shadow: 9999px 0 0 -5px;
  animation: dot-pulse 1.5s infinite linear;
  animation-delay: 0.25s;
}
.dot-pulse::before, .dot-pulse::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #fff;
  color: #fff;
}
.dot-pulse::before {
  box-shadow: 9984px 0 0 -5px;
  animation: dot-pulse-before 1.5s infinite linear;
  animation-delay: 0s;
}
.dot-pulse::after {
  box-shadow: 10014px 0 0 -5px;
  animation: dot-pulse-after 1.5s infinite linear;
  animation-delay: 0.5s;
}
.stage {
    display: flex;
    align-items: center;
    justify-content: center;
}
@keyframes dot-pulse-before {
  0% {
    box-shadow: 9984px 0 0 -5px;
  }
  30% {
    box-shadow: 9984px 0 0 2px;
  }
  60%, 100% {
    box-shadow: 9984px 0 0 -5px;
  }
}
@keyframes dot-pulse {
  0% {
    box-shadow: 9999px 0 0 -5px;
  }
  30% {
    box-shadow: 9999px 0 0 2px;
  }
  60%, 100% {
    box-shadow: 9999px 0 0 -5px;
  }
}
@keyframes dot-pulse-after {
  0% {
    box-shadow: 10014px 0 0 -5px;
  }
  30% {
    box-shadow: 10014px 0 0 2px;
  }
  60%, 100% {
    box-shadow: 10014px 0 0 -5px;
  }
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
                        $(".site-loader").delay(5000).fadeOut(2e3);
});
</script>