General / Posts /

CSS loading spinner with a semi-transparent background


I need a semi-transparent background that covers the whole page, with a semi-transparent spinner to indicate the page is still in loading process. I want a simple plain CSS solution. Anybody can show me how?

Vincent  7 years ago   viewed: 160181    

11 Answers


1. Add the following element in the page (anywhere):

<div id="cover-spin"></div>

2. Also add the following styles in the stylesheet:

#cover-spin { position:fixed; width:100%; left:0;right:0;top:0;bottom:0; background-color: rgba(255,255,255,0.7); z-index:9999; display:none; } @-webkit-keyframes spin { from {-webkit-transform:rotate(0deg);} to {-webkit-transform:rotate(360deg);} } @keyframes spin { from {transform:rotate(0deg);} to {transform:rotate(360deg);} } #cover-spin::after { content:''; display:block; position:absolute; left:48%;top:40%; width:40px;height:40px; border-style:solid; border-color:black; border-top-color:transparent; border-width: 4px; border-radius:50%; -webkit-animation: spin .8s linear infinite; animation: spin .8s linear infinite; }

How to Use

By default, the element will not be visible as it has been styled as {display:none;}

You can show it when you need it. For example:

<button onclick="$('#cover-spin').show(0)">Save</button>
Note: Above code is supposing that your page has the jQuery plugin.

Another Way to Use

You don't need to add the element into the page initially as shown in the beginning. And you can style it as {display:block;} instead of {display:none;}. You can dynamically add the element when you need it. For example:

<button onclick="$('#contentContainer').html('<div id=\'cover-spin\'></div>'); myAjaxSave();">Save</button>


   Your update has been successfully saved.

  7 years ago
Wow. You did it man. Working very smoothly.
Gaurav Singh
  3 years ago

nice one works perfectly... thanks....

  4 years ago

I love this!  One tiny tweak makes it even better.

Set the width, height and left parameters using ViewWidth units (vw), so the spinner always stays perfectly centered no matter what the screen size.  Otherwise, the spinner gets pretty off-center on tiny devices.

For example:

left: 44vw;
top: 40%;
width: 12vw;
height: 12vw;

This has the added benefit of automatically scaling up the size of the spinner on larger devices.  Win-win!
Tony   2 years ago

Awesome! works a treat!

  3 years ago

Works perfect on Firefox and CHrome, but on Safari, when you submit any form with an action, the spinner gets frozen and does not display. Any way to solve it?

  2 years ago

Nice, it's really helpful. 

  2 years ago

Thanks so much. I use it in my blazor project.

  one year ago

Such a great help! Thank you. 

gutter cleaning mn
  one year ago

Certainly! To achieve a semi-transparent background and a spinner indicating the page is loading, you can use CSS.

  one year ago

How are you creating the close button at top right?

  3 years ago


Your name*
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question:
    • If your question is related to the General, click:

      Ask new question: General
    • Otherwise navigate to one of the following forum categories, and post your question there.