Profile: Brent Urbanski

Problem: I am using AJAX to update a custom search View, and I would like to display the spinner in a full-page overlay.

Solution: When you insert the spinner graphic in your View's filter controls, you'll have the opportunity to add your own CSS classes, inline CSS styles, and additional content that will appear inside the spinner markup on the front-end. The specific CSS that must be added to make the loader cover the entire page varies based on your site's theme and other page markup and structure. There is no global CSS that will work for every person on every site, unfortunately. Here is some starting code, but it will require customization for your site's requirements:

.fullscreen-spinner {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(10,10,10,0.5);
    z-index: 2;
}
 
.fullscreen-spinner > img {
  margin-left: auto;
  margin-right: auto;
  margin-top: 30%;
  display:block;
}

Add the CSS class "fullscreen-spinner" in the "container classnames" configuration, and add the CSS code above in the View Filter Editor CSS panel.