In my Blazor server side app, I want to blur the related razor page when a "loading" spinner is shown on the page. How can I do that?

In my Blazor server side app, I am using a "loading" spinner, when I run a method that takes few seconds time. This part is working as expected. But during the spinner is turning on the screen I want to blur the related razor page (The whole razor page except the spinner). How can I do this?

My code for the spinner is shown below:

Razor page:

  @if (Loading_spinner == true)  {<div class="spinner"></div>  }

CSS:

.spinner {    border: 16px solid silver;    border-top: 16px solid #337AB7;    border-radius: 50%;    width: 80px;    height: 80px;    animation: spin 700ms linear infinite;    top: 40%;    left: 55%;    position: absolute;}