General / Posts /

CSS loading spinner with a semi-transparent background

45

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  2 years ago   viewed: 44607    

7 Answers

17
×

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>


DEMO

   Your update has been successfully saved.


Milo
  2 years ago
4

Thank you very much, it helped :)

Ihor   7 months ago
1

Thanks for the post. Very helpful for me.

Saroj Rana
  one year ago
1

 It helped 

Thank you very much :)

ankita
  4 months ago
0

Was very helpful .. Thanks a ton ! :) 

Swathi B N   6 months ago
0

Awesome! Very Helpful! it works perfect

Patrick
  3 months ago
0
Awesome! Very Helpful! it works perfect
ANONYMOUS   2 months ago

   

Your name*
Password
(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.

      ##