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

Question

我想在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>

Answer 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>

Answer 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。