@uni/loading/es/web/showLoading.js

import { normalizeShow } from "../common";
import { CONTAINER_NAME } from "../_utils/constant";
// window.__uni_loadingWin = null;
var clsPrefix = '__universal_loading';
var styles = ("." + clsPrefix + " {\n  background-color: rgba(0, 0, 0, 0.6);\n  box-sizing: border-box;\n  max-width: 80%;\n  color: #ffffff;\n  padding: 15px;\n  position: fixed;\n  left: 50%;\n  bottom: 50%;\n  border-radius: 4px;\n  text-align: center;\n  transform: translateX(-50%);\n  -webkit-transform: translateX(-50%);\n  z-index: 9999;\n  outline: none;\n}\n." + clsPrefix + "_circle {\n  border: 2px solid rgba(200, 200, 200, 0.5);\n  border-radius: 50%;\n  position: relative;\n  height: 40px;\n  width: 40px;\n  margin: auto;\n}\n." + clsPrefix + "_circle:after {\n  content: \"\";\n  display: block;\n  border-radius: 50%;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: -2px;\n  left: -2px;\n  border: 2px solid;\n  border-color: transparent;\n  border-left-color: #fff;\n  box-sizing: content-box;\n  animation: " + clsPrefix + "_roller 1s infinite linear;\n}\n." + clsPrefix + "_text {\n  margin-top: 6px;\n  color: #fff;\n  line-height: 1.5;\n  font-size: 14px;\n  text-align: center;\n  font-weight: normal;\n}\n@keyframes " + clsPrefix + "_roller {\n  0% {\n    transform: rotateZ(0);\n  }\n  100% {\n    transform: rotateZ(360deg);\n  }\n}").replace(/\n/g, '');
/*
 * @param message {String}
 */

var styleElement = null;
export var showLoading = normalizeShow(function (_ref) {
  var _ref$content = _ref.content,
      content = _ref$content === void 0 ? '' : _ref$content,
      _ref$success = _ref.success,
      success = _ref$success === void 0 ? function () {} : _ref$success,
      _ref$fail = _ref.fail,
      fail = _ref$fail === void 0 ? function () {} : _ref$fail,
      _ref$complete = _ref.complete,
      complete = _ref$complete === void 0 ? function () {} : _ref$complete;

  try {
    if (!styleElement) {
      // create a style tag for keyframes
      styleElement = document.createElement('style');
      styleElement.innerHTML = styles;
      document.body.appendChild(styleElement);
    }

    if (!window.__uni_loadingWin) {
      // create loading win
      window.__uni_loadingWin = document.createElement('div');
      window.__uni_loadingWin.className = clsPrefix;

      window.__uni_loadingWin.setAttribute('role', 'alert'); // support for ARIA, add tabindex for focus
      // https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/tabindex


      window.__uni_loadingWin.setAttribute('tabindex', '-1'); // add a circle element


      var circle = document.createElement('div');
      circle.className = clsPrefix + "_circle";

      window.__uni_loadingWin.appendChild(circle); // add text element


      var _text = document.createElement('div');

      _text.className = clsPrefix + "_text";

      window.__uni_loadingWin.appendChild(_text);

      document.body.appendChild(window.__uni_loadingWin);
    }

    var text = window.__uni_loadingWin.querySelector("." + clsPrefix + "_text");

    if (content) {
      text.style.display = 'block';
      text.innerText = content;
    } else {
      text.style.display = 'none';
      text.innerText = '';
    }

    success();
    complete();
  } catch (error) {
    fail();
    complete();
  }
}, CONTAINER_NAME.WEB);
export default showLoading;