加载动画和灰显背景不起作用

Question

我只想在点击TestLoading按钮时获得带有灰色背景的加载动画。但我无法做到。加载GIF略微在左侧，但我希望它在中心。灰色背景也不起作用。

这是我的css：

.divLoader {
  margin: 0px;
  padding: 0px;
  position: fixed;
  right: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: rgb(67, 71, 75);
  z-index: 30001;
  opacity: 0.8;
}
.divLoaderContent {
  position: absolute;
  color: White;
  top: 50%;
  left: 40%;
}

在我看来，我有这个：

<!--LOADER  -->
<div id="divProcessing" class="divLoader">
  <p class="divLoaderContent"><img src="~/Content/image/blocks.gif"></p>
</div>

和

$('#btnRoster1').click(function(e) {
  $("#divProcessing").show();
});

Answer 1

以下是css的修订版：

.divLoader{
  display: none;
  position: fixed; 
  top: 0;
  left: 0; 
  width: 100%; 
  height: 100%; 
  background-color: rgba(67, 71, 75, 0.8); 
  z-index: 30001; 
}

.divLoaderContent{
    position: absolute; 
    color: White; 
    top: 50%; 
    left: 0;
    right: 0;
    margin: auto;
    transform: translateY(-50%);    
}

并且不要将im标签用于img容器。请改用div

Answer 2

动画.show()使用

$('#btnRoster1').click(function(e) {
  $("#divProcessing").show(800);
});

其中800是0.8秒。

要对齐gif，你可以使用flex并摆脱绝对定位：

.divLoaderContent {
  color: White;
  display: flex;
  justify-content: center;
}

Answer 3

基于百分比移动元素（尤其是img标签）的顶部/左侧可能会变得混乱，因为它取决于img的大小。我建议使用flex这种方法。 justify-content会使子项水平居中，align-items display flex时.divLoader { margin: 0px; padding: 0px; position: fixed; right: 0px; top: 0px; width: 100%; height: 100%; background-color: rgb(67, 71, 75); z-index: 30001; opacity: 0.8; display: none; justify-content: center; align-items: center; } 会垂直居中

display: none

然后让你的js修改css中的显示以便在你想要它时显示，然后$('#btnRoster1').click(function(e) { $("#divProcessing").css('display', 'flex'); }); 当你想要它隐藏时;

<p>

下面的小提琴（模拟加载后3秒钟超时）我也取出了不必要的{{1}}标签。

https://jsfiddle.net/Garrito/vh2ttmu9/35/