如何修改此 HTML JS 页面加载脚本以淡出白色背景和图标

Question

我已经实现了这个加载图标，它运行良好并且显示在页面的中央，这很好。我已经添加了一个额外的脚本来淡出图标，而不是它突然改变，这很有效，但白色背景的变化仍然非常突然。

我想知道如何更改以下脚本以允许白色背景淡出页面内容和图标。

<style>
#loader { 
            
            width: 70px; 
            height: 70px; 
        } 
          
        .center { 
            background: #fff;
            position:fixed;
            top: 0; 
            bottom: 0; 
            left: 0; 
            right: 0; 
            margin: auto; 
        } 
</style>

<div id="loader" class="center"> <i class="fa fa-spinner fa-5x fa-spin" style="color:#118F5E"></i></div>

<script> 
        document.onreadystatechange = function() { 
            if (document.readyState !== "complete") { 
                document.querySelector( 
                  "body").style.visibility = "hidden"; 
                $('#loader').animate({opacity: 0}, 1000);
                document.querySelector( 
                  "#loader").style.visibility = "visible";
                
            } else { 
                document.querySelector( 
                  "#loader").style.display = "none"; 
                document.querySelector( 
                  "body").style.visibility = "visible"; 
            } 
        }; 
    </script>

Answer 1

您可以稍微扩展一下现有的内容，然后将加载器放在覆盖容器中。

html

<div id="page-overlay" class="center">
  <div id="loader" class="center"> <i class="fa fa-spinner fa-5x fa-spin" style="color:#118F5E"></i></div>
</div>

css

#loader { 
  width: 70px; 
  height: 70px; 
} 

.center { 
  background: #fff;
  position:fixed;
  top: 0; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  margin: auto; 
}

js

document.onreadystatechange = function() { 
  if (document.readyState !== "complete") { 
    document.querySelector( 
      "body").style.visibility = "hidden"; 
    $('#page-overlay').animate({opacity: 0}, 1000);
    
    document.querySelector( 
      "#loader").style.visibility = "visible";
  } else { 
   document.querySelector( 
      "#loader").style.display = "none";
    document.querySelector( 
      "body").style.visibility = "visible"; 
  } 
};

所以基本上 1) 将 #loader 插入 HTML 中的 #page-overlay 2) 将动画应用到 JS 中的 $('#page-overlay')。这里有一个fiddle的概念：https://jsfiddle.net/kyb4mezh/

这将使页面有效过渡。您甚至可以更进一步，为加载器容器添加固定的不透明度。

如何修改此 HTML JS 页面加载脚本以淡出白色背景和图标

How to modify this HTML JS page loading script to fade out white background as well as icon

html

javascript

loading

gif