与微调器叠加

Question

我正在尝试创建一个覆盖页面，中间有一个微调器。完成此操作的最简单方法是什么？我只需要担心 IE 8 及更高版本。

原文由 Ben 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 css3 类“spinner”。它更漂亮，你不需要 .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);}
    }

看起来像的例子：http: //jsbin.com/roqakuxebo/1/edit

你可以在这里找到很多像这样的 css 旋转器：http: //cssload.net/en/spinners/

原文由 Damien Romito 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

最好使用 rgba 颜色而不是不透明度来防止将 alpha 应用于微调器图像。

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

原文由 seler 发布，翻译遵循 CC BY-SA 3.0 许可协议