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  4 years ago   viewed: 98800    

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

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

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

  one year ago

How are you creating the close button at top right?

  one year ago

Thank you ... this really helped

Marty   10 months ago

Awesome! works a treat!

  5 months 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 month 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.