Blur action on Apex page

by

A simple method of indicating to the user that the page is performing some kind of background operation would be to blur the page and show a dialog box.

One method of achieving this is as follows :-

Add a class that will sit over the whole page. We’ll use the backdrop-filter to create the blur effect

.loadingDiv {
  display:none;
  z-index:1000;
  position:absolute;
  left:0px;
  top:0px;
  width:100%;
  height:100%;
  backdrop-filter:blur(2px)
}

In the page header section, add the following div. The inner div can be styled however you want it

<div id="bgDiv" class="loadingDiv">
  <div id="loadingDiv" style="position:absolute;z-index:9999;left:40%;top:300px;width:300px;height:50px;background-color:rgb(179 14 14 / 80%);"><br>&nbsp;&nbsp;&nbsp;Refreshing data...</div>
</div>

Once that is added, used dynamic actions to show/hide the ‘#bgDiv’ using a jQuery selector.

There are many ways to accomplish this but this is a simple one.