I tried to implement a loading spinner with backdrop in my page.

My css for the backdrop looks like this

.backdrop {
  position:absolute;
  top:0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  background-color: rgb(0,0,0,0.2);
}

my spinner css looks like this:

.spinner {
  position: relative;
  top: 50%;
  left: 50%
}

My problem is, my list (the viewport) can be expandable because of loading more items feature when the scroll reach near end of the viewport. When scrolling down, I can not see my backdrop and the spinner as well.

Any idea how to solve this ?

Many thanks in advance !