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  6 years ago   viewed: 140037    

12 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.

  6 years ago
Wow. You did it man. Working very smoothly.
Gaurav Singh
  2 years ago

what if i want loader color white 

Shreyansh Nigam
  one month ago

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

  2 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   one year ago

Nice, it's really helpful. 

  one year ago

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

  7 months ago

How are you creating the close button at top right?

  2 years ago

Thank you ... this really helped

Marty   2 years ago

Awesome! works a treat!

  one year 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?

  one year ago

Such a great help! Thank you. 

gutter cleaning mn
  18 days 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.