如何在引导加载程序时使背景透明答案

【问题标题】：How to make background transparent while bootstrap loader如何在引导加载程序时使背景透明
【发布时间】：2017-04-14 13:24:02
【问题描述】：

我想在 API 返回结果时制作引导加载图像。如何使背景透明？

这是 HTML 标记和 CSS：

<div class="loader" ng-hide="data.length > 0"></div>


<style>
.loader {
  border: 16px solid #D4D4D4;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
    position: fixed;
    top:100px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 99999999;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>

【问题讨论】：

将background-color: transparent 添加到.loader
我的意思是所有页面的背景颜色..使用加载器

标签： javascript twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

给 .loader 添加背景色：透明

<div class="loader" ng-hide="data.length > 0"></div>


<style>
.loader {
  border: 16px solid #D4D4D4;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  background-color: transparent;
  height: 120px;
    position: fixed;
    top:100px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 99999999;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>

【讨论】：

我的意思是所有页面的背景颜色..使用加载器

【解决方案2】：

您总是可以使用加载器在页面上添加一个较小尺寸的 div，并将其设置为浅灰色并降低不透明度，例如：

#div1{
  width:500px;
  height:500px;
  background-image: url("https://images3.alphacoders.com/823/82317.jpg");
}

#div2{
  width:200px;
  height:200px;
  margin: 0 auto;
  background-color:gray;
  opacity:.7;
  position:absolute;
  top:150px;
  left:150px;
}

<div id="div1">
  <div id="div2">
  </div> 
</div>

然后，您可以将加载程序放在那个较小的 div 中，并在 API 获取数据时显示该 div。

【讨论】：