Overlay with spinner

Question

I'm trying to create an overlay that overlays a page with a spinner in the middle. What's the simplest way to accomplish this? I only need to worry about IE 8 and above.

Answer 1

use a css3 class "spinner". It's more beautiful and you don't need .gif

.spinner {    position: absolute;    left: 50%;    top: 50%;    height:60px;    width:60px;    margin:0px auto;    -webkit-animation: rotation .6s infinite linear;    -moz-animation: rotation .6s infinite linear;    -o-animation: rotation .6s infinite linear;    animation: rotation .6s infinite linear;    border-left:6px solid rgba(0,174,239,.15);    border-right:6px solid rgba(0,174,239,.15);    border-bottom:6px solid rgba(0,174,239,.15);    border-top:6px solid rgba(0,174,239,.8);    border-radius:100%; }  @-webkit-keyframes rotation {    from {-webkit-transform: rotate(0deg);}    to {-webkit-transform: rotate(359deg);} } @-moz-keyframes rotation {    from {-moz-transform: rotate(0deg);}    to {-moz-transform: rotate(359deg);} } @-o-keyframes rotation {    from {-o-transform: rotate(0deg);}    to {-o-transform: rotate(359deg);} } @keyframes rotation {    from {transform: rotate(0deg);}    to {transform: rotate(359deg);} } 

Exemple of what is looks like : http://jsbin.com/roqakuxebo/1/edit

You can find a lot of css spinners like this here : http://cssload.net/en/spinners/

Answer 2

#overlay {     position: fixed;     width: 100%;     height: 100%;     background: black url(spinner.gif) center center no-repeat;     opacity: .5; } 

it's better to use rgba color instead of opacity to prevent applying alpha to spinner image.

background: rgba(0,0,0,.5) url(spinner.gif) center center no-repeat;