加载动画函数(loadingToast)

自己封装的一个 loading 弹窗，以函数的形式展现

函数

/**
     * @Description: 加载动画
     * @params: text: String  文本
     * @params: duration：Number 延迟时间(s) 默认1500
     * @params: canClick：Boolean 是否可点击页面 默认 true
     * @return: { close() }
     *  <div class="loading-box">
     *  <div class="loading-layer can-click"></div>
     *  <div class="loading-content">
     *  <div class="leader">
     *  <span :style="{'--i':i}" v-for="i in 10"></span>
     *  </div>
     *  <div class="leader-text">加载中...</div>
     *  </div>
     *  </div>
     *
     */
     function myLoadingToast({ text, duration = 1500, canClick = true }) {
      var loadingBox = document.createElement("div"),
        loadingLayer = document.createElement("div"),
        loadingContent = document.createElement("div");
      loadingBox.setAttribute("class", "loading-box-uid125");
      loadingContent.setAttribute("class", "loading-content");
      if (canClick) {
        loadingLayer.setAttribute("class", 'loading-layer can-click');
      } else {
        loadingLayer.setAttribute("class", 'loading-layer');
      }
      var leader = document.createElement("div");
      leader.setAttribute("class", "leader")
      for (let index = 1; index <= 10; index++) {
        var span = document.createElement("span");
        span.setAttribute("style", "--i:" + index);
        leader.appendChild(span)
      }
      loadingContent.appendChild(leader)
      var leaderText = document.createElement("div");
      leaderText.setAttribute("class", "leader-text");
      leaderText.innerText = text.toString();
      loadingContent.appendChild(leaderText);
      var cssStyle = document.createElement('style');
      cssStyle.type = 'text/css';
      cssStyle.innerHTML = ".loading-box-uid125{position:relative;touch-action:none}.loading-box-uid125 .loading-layer{position:fixed;top:0px;left:0px;right:0px;bottom:0px;z-index:2000}.loading-box-uid125 .loading-layer.can-click{z-index:-1}.loading-box-uid125 .loading-content{position:fixed;top:50%;left:50%;width:120px;height:120px;transform:translate(-50%, -50%);background-color:#575759;display:flex;z-index:2000;border-radius:10px}.loading-box-uid125 .loading-content .leader{position:relative;left:30px;top:10px;width:60px;height:60px}.loading-box-uid125 .loading-content .leader span{position:absolute;left:15px;top:15px;width:30px;height:30px;transform:rotate(calc(36deg * var(--i)))}.loading-box-uid125 .loading-content .leader span::before{content:'';position:absolute;top:0px;left:0px;width:6px;height:6px;background:#fff;border-radius:50%;animation:loading-boxLeaderAnimation 1.5s linear infinite;animation-delay:calc(.1s * var(--i))}@keyframes loading-boxLeaderAnimation{0%{transform:scale(0)}50%{transform:scale(1.3)}100%{transform:scale(0)}}.loading-box-uid125 .loading-content .leader-text{position:absolute;top:80px;font-size:16px;color:#fff;width:100%;text-align:center}";
      document.getElementsByTagName('head')[0].appendChild(cssStyle);
      if (duration > 0) {
        setTimeout(function () {
          loadingBox.remove();
        }, duration);
      }
      loadingBox.appendChild(loadingLayer);
      loadingBox.appendChild(loadingContent);
      document.body.appendChild(loadingBox)

      function close() {
        document.querySelectorAll(".loading-box-uid125").forEach(element => {
          element.remove();
        })
      }
      return {
        close: close
      }
    }

html结构

   <div class="loading-box">
      <div class="loading-layer can-click"></div>
      <div class="loading-content">
       <div class="leader">
     		<span :style="{'--i':i}" v-for="i in 10"></span>
       </div>
       <div class="leader-text">加载中...</div>
      </div>
    </div>

css

.loading-box-uid125 {
  position: relative;
  touch-action: none;
}
.loading-box-uid125 .loading-layer {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 2000;
}
.loading-box-uid125 .loading-layer.can-click {
  z-index: -1;
}
.loading-box-uid125 .loading-content {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%);
  background-color: #575759;
  display: flex;
  z-index: 2000;
  border-radius: 10px;
}
.loading-box-uid125 .loading-content .leader {
  position: relative;
  left: 30px;
  top: 10px;
  width: 60px;
  height: 60px;
}
.loading-box-uid125 .loading-content .leader span {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 30px;
  height: 30px;
  transform: rotate(calc(36deg * var(--i)));
}
.loading-box-uid125 .loading-content .leader span::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  animation: loading-boxLeaderAnimation 1.5s linear infinite;
  animation-delay: calc(0.1s * var(--i));
}
@keyframes loading-boxLeaderAnimation {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(0);
  }
}
.loading-box-uid125 .loading-content .leader-text {
  position: absolute;
  top: 80px;
  font-size: 16px;
  color: #fff;
  width: 100%;
  text-align: center;
}