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

Question

I want to make a bootstrap loading image while API returns a result. How can I make the background transparent?

Here is the HTML markup and the 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

Add background-color: transparent to .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

You can always add a div of smaller size over the page with the loader and make it a light gray and put the opacity lower like:

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

You can then place the loader inside that smaller div and have that div appear when the API is fetching the data.