element-ui loading加载代码单独提取使用

由于项目中有使用element-ui组件库，发现自带的loading加载效果比较好，可以单独或者全局使用，所以将该不分代码单独提取出来，方便在任意Html文件中使用，html文件只需要将一下css代码跟html代码引入即可实现跟element-ui一样的loading效果了。

<style>
      .el-loading-mask {
        position: absolute;
        z-index: 2000;
        background-color: ■hsla(0, 0, 100%, ・9);
        margin: 0;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transition: opacity .3s;
      }
      .el-loading-spinner {
        top: 50%;
        margin-top: -21px;
        width: 100%;
        text-align: center;
        position: absolute;
      }
      .el-loading-spinner .circular {
        height: 42px;
        width: 42px;
        animation: loding-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;
      }
      @keyframes loading-rotate {
        100% {
          transform: rotate (1turn);
        }
      }
      @keyframes loading-dash {
        0% {
          stroke-dasharray: 1, 200;
          stroke-dashoffset: 0;
        }
        50% {
          stroke-dasharray: 90, 150;
          stroke-dashoffset: -40px;
        }
        100% {
          stroke-dasharray: 90, 150;
          stroke-dashoffset: -120px;
        }
      }
    </style>
    <div class="el-loading-mask">
      <div class="el-loading-spinner">
        <svg class="circular" viewBox="0 0 50 50">
          <circle class="path" cx="25" cy="25" r="20" fill="none"></circle>
        </svg>
      </div>
    </div>

本文章由javascript技术分享原创和收集