创建透明加载叠加层

Question

问

创建透明加载叠加层

你的美丽来自我的设计发布于 2023-02-08 15:05

使用相同的标记(如下所示),是否可以添加创建透明背景叠加的样式,即加载叠加？当我尝试向.loadingCSS 添加背景时,它只将它添加到.loading元素的背景而不是正文.样式.loading被删除(通过jQuery)所以理想情况下我希望覆盖以某种方式连接到.loading,如果可能的话？

HTML


    content

CSS

.loading {
  position: fixed;
  top: 1px;

  margin: 5em;
  border-width: 30px;
  border-radius: 50%;
  -webkit-animation: spin 1s linear infinite;
     -moz-animation: spin 1s linear infinite;
       -o-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
  }

.style-1 {
  border-style: solid;
  border-color: #444 transparent;
  }

.style-2 {
  border-style: double;
  border-color: #ccc transparent;
  }

.style-3 {
  border-style: double;
  border-color: #444 #fff #fff;
  }

@-webkit-keyframes spin {
  100% { -webkit-transform: rotate(359deg); }
  }

@-moz-keyframes spin {
  100% { -moz-transform: rotate(359deg); }
  }

@-o-keyframes spin {
  100% { -moz-transform: rotate(359deg); }
  }

@keyframes spin {
  100% {  transform: rotate(359deg); }
  }

LeBen.. 25

我能够进行加载覆盖,但只增加了一个额外的容器.

http://jsfiddle.net/8k2NV/2/

2 个回答

我能够进行加载覆盖,但只增加了一个额外的容器.
```
<div class="loading style-2"><div class="loading-wheel"></div></div>
```
http://jsfiddle.net/8k2NV/2/
2023-02-08 15:08 回答

骆锐锋1_665
添加透明背景
```
$('.loading').css('background', 'transparent');
```
删除加载div
```
$('.loading').hide();
```
和小提琴
2023-02-08 15:09 回答

哲亚Zoe

撰写答案