Question

我需要帮助才能使这个加载动画响应，因为它不会在不同的屏幕上缩放

那么，如何让它在任何屏幕尺寸的屏幕中居中

CSS代码：

.loader {
    font-family: Consolas, Menlo, Monaco, monospace;
    font-weight: bold;
    font-size: 30px;
    opacity: 0.8;
    position: absolute;
    color: #ffffff;
    position: fixed;
    top: 45%;
    left: 35%;
}
.loader span {
    display: inline-block;
    animation: pulse 0.4s alternate infinite ease-in-out;
}
.loader span:nth-child(odd) {
    animation-delay: 0.4s;
}
@keyframes pulse {
to {
    transform: scale(0.8);
    opacity: 0.5;
}
}

预载重叠的CSS

/*Section Loading Style*/
.preload-overlay {
    background-color: @background-color;
    color: #434343;
    background: #72bf69;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    z-index = 99999;
    text-align: center;
}

HTML代码，我在正文结束前推出了这个代码：

 <!-- Start PreLoading -->
    <div class="preload-overlay">
        <div class="loader">
            <span>{</span>
               Loading, Please wait
            <span>}</span>
            ;
        </div>
    </div>
    <!-- End PreLoading -->

JS代码：

/*Loading Page script*/
$(window).on('load', function() {

   $(".preload-overlay").fadeOut(1000, function () {
    $("body").css("overflow","auto");
    $(".preload-overlay").remove();
   });
});

Answer 1

您没有为预装重叠添加样式，但是，如果是一个选项，flexbox是您最好的朋友。

.preload-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100%;
  height: 100%;
}
.loader {
  font-family: Consolas, Menlo, Monaco, monospace;
  font-weight: bold;
  font-size: 30px;
  opacity: 0.8;
  color: #ffffff;
}

编辑：如果可能，我仍然会使用flex。这不是一个选择吗？

.preload-overlay {
  background-color: @background-color;
  color: #434343;
  background: #72bf69;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index = 99999;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader {
  font-family: Consolas, Menlo, Monaco, monospace;
  font-weight: bold;
  font-size: 30px;
  opacity: 0.8;
  color: #ffffff;
}

加载动画没有响应

1 个答案: