提取自 element-ui 的 v-loading，适用 vue2/vue3

用法

let status = true;
v-loading="status"

JS

const toggleLoading = (el, binding) => {
  if (binding.value) {
    let dom = `
      <div class="el-loading-mask">
        <div class="el-loading-spinner">
          <svg viewBox="25 25 50 50" class="circular">
            <circle cx="50" cy="50" r="20" fill="none" class="path"> </circle>
          </svg>
          <p class="el-loading-text">加载中</p>
        </div>
      </div>`
    el.classList.add('el-loading-parent--relative')
    el.insertAdjacentHTML('afterbegin', dom)
  } else {
    const ds = el.getElementsByClassName('el-loading-mask')[0]
    if (ds) {
      el.removeChild(ds)
      el.classList.remove('el-loading-parent--relative')
    }
  }
}
const loading = {
  // vue2 是 inserted, vue3 是 created
  inserted: function(el, binding, vnode) {
    toggleLoading(el, binding)
  },
  // vue2 是 update, vue3 是 updated
  update: function(el, binding) {
    if (binding.oldValue !== binding.value) {
      toggleLoading(el, binding)
    }
  }
}
export default {
  directives: {
    loading
  },
}

CSS

.el-loading-parent--relative {
  position: relative !important;
}
.el-loading-mask {
  position: absolute;
  z-index: 2000;
  background-color: rgba(0, 0, 0, 0.3);
  margin: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: opacity 0.3s
  .el-loading-spinner {
    top: 50%;
    margin-top: -21px;
    width: 100%;
    text-align: center;
    position: absolute;
  }
  .el-loading-spinner .el-loading-text {
    color: #409eff;
    margin: 3px 0;
    font-size: 14px;
  }
  .el-loading-spinner .circular {
    height: 42px;
    width: 42px;
    animation: loading-rotate 2s linear infinite;
  }
  .el-loading-spinner .path {
    animation: loading-dash 1.5s ease-in-out infinite;
    stroke-dasharray: 90, 150;
    stroke-dashoffset: 0;
    stroke-width: 2;
    stroke: #409eff;
    stroke-linecap: round;
  }
  .el-loading-spinner i {
    color: #409eff;
  }
  .el-loading-fade-enter,
  .el-loading-fade-leave-active {
    opacity: 0;
  }
  @keyframes loading-rotate {
    to {
      transform: rotate(1turn);
    }
  }
  @keyframes loading-dash {
    0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
    }

    50% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -40px;
    }

    to {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -120px;
    }
  }
}