<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

---

<div  id="IdOrClass">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus esse ab exercitationem voluptatem minima. Consectetur illum quas obcaecati sint in fuga temporibus ex ipsam, explicabo aspernatur animi, et molestias harum?</p>
  <ul>
    <li>Lorem ipsum dolor sit amet, adipisicing elit?</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit?</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing?</li>
    <li>Lorem ipsum dolor sit amet elit?</li>
  </ul>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  <p>Voluptatibus esse ab exercitationem voluptatem minima. Consectetur illum quas obcaecati sint in fuga temporibus ex ipsam, explicabo aspernatur animi, et molestias harum?</p>
</div> 


<button onclick="loading_show('#IdOrClass')">Liga o load </button>
<button onclick="loading_hide()">Desliga o load </button>

---

function loading_show(obj){
  var item = $('<div id="loading"><div class="loader"></div></div>').hide();
  $(obj).append(item);
  item.fadeIn(500);
}

function loading_hide(){
  $( "#loading" ).fadeOut(500, function() {
    $( "#loading" ).remove();
  });  
}

---

#IdOrClass {
  position: relative;
  padding:10px;
}
#loading {
    z-index: 10000000;
    background: #0000001f;
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #009EC0;
    left: 0px;
    top: 0px;
}

da pra usar varios modelos de load veja nesse link abaixo segue dois modelos

Modelo de load 01

.loader {
    width: 48px;
    height: 48px;
    display: inline-block;
    position: relative;
    border: 5px solid;
    border-color:#009EC0 #0000 #009EC0 #0000;
    border-radius: 50%;
    box-sizing: border-box;
    animation: 2s rotate linear infinite;
 }
 .loader:before , .loader:after{
    content: '';
    top: 0;
    left: 0;
    position: absolute;
    border: 10px solid transparent;
    border-bottom-color:#009EC0;
    transform: translate(-10px, 18px) rotate(-35deg);
  }
 .loader:after {
    border-color: #009EC0 #0000 #0000 #0000 ;
    transform: translate(29px, 0px) rotate(-36deg);
  }
   @keyframes rotate {
    100%{    transform: rotate(360deg)}
  }

Modelo de load 2

.loader {
  box-sizing: border-box;
  display: inline-block;
  width: 50px;
  height: 80px;
  border-top: 5px solid #fff;
  border-bottom: 5px solid #fff;
  position: relative;
  background: linear-gradient(#FF3D00 30px, transparent 0) no-repeat;
  background-size: 2px 40px;
  background-position: 50% 0px;
  animation: spinx 5s linear infinite;
}
.loader:before, .loader:after {
  content: "";
  width: 40px;
  left: 50%;
  height: 35px;
  position: absolute;
  top: 0;
  transform: translatex(-50%);
  background: rgba(255, 255, 255, 0.4);
  border-radius: 0 0 20px 20px;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: 0 0px;
  animation: lqt 5s linear infinite;
}
.loader:after {
  top: auto;
  bottom: 0;
  border-radius: 20px 20px 0 0;
  animation: lqb 5s linear infinite;
}
@keyframes lqt {
  0%, 100% {
    background-image: linear-gradient(#FF3D00 40px, transparent 0);
    background-position: 0% 0px;
  }
  50% {
    background-image: linear-gradient(#FF3D00 40px, transparent 0);
    background-position: 0% 40px;
  }
  50.1% {
    background-image: linear-gradient(#FF3D00 40px, transparent 0);
    background-position: 0% -40px;
  }
}
@keyframes lqb {
  0% {
    background-image: linear-gradient(#FF3D00 40px, transparent 0);
    background-position: 0 40px;
  }
  100% {
    background-image: linear-gradient(#FF3D00 40px, transparent 0);
    background-position: 0 -40px;
  }
}
@keyframes spinx {
  0%, 49% {
    transform: rotate(0deg);
    background-position: 50% 36px;
  }
  51%, 98% {
    transform: rotate(180deg);
    background-position: 50% 4px;
  }
  100% {
    transform: rotate(360deg);
    background-position: 50% 36px;
  }
}