Javascript 加载动画没有响应

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

那么，对于任何屏幕大小，如何使其在屏幕中居中

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

---

你没有将你的样式包括在预加载覆盖中，但是，如果可以的话，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;
}

---

我已经编辑并添加了丢失的代码，请您再检查一遍好吗

.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;
}