Change spinner background for whole page

[hello2]

I have been able to add a custom spinner as follows…

/* Custom Spinner */
#loadingSpinner {
    width: 150px;
    height: 150px;
    border-radius: 0;
    background-color: #232323;
    box-shadow: none;
    background-image: url(_/theme/img/loader-1.gif) !important;
}

The result is as per still image below…

How do I get rid of the ‘blue’ tint around the spinner, and englarge the background color (in this case black) to fill the whole web page?

[ryan]

Hello @hello2,

This works for the standard spinner:

.anvil-spinner {
  /* Change background */
  background-color: black;
  min-height: 110%;
  width: 100%;
  left: 0;
  top: 0;
  margin: 0;
  
  /* Remove shadow */
	border-radius: 0px;
	box-shadow: none;

  /* Set spinner to be in the original position */
  .anvil-spinner-svg {
    height: var(--anvil-spinner-size,70px);
    width: var(--anvil-spinner-size,70px);
    left: calc(50% - var(--anvil-spinner-size, 70px)/2);
    top: calc(33% - var(--anvil-spinner-size, 70px)/2);
    position: absolute;
  }
}

Here’s a clone link:

Login

Hope that helps.