由于项目中有使用element-ui组件库,发现自带的loading加载效果比较好,可以单独或者全局使用,所以将该不分代码单独提取出来,方便在任意Html文件中使用,html文件只需要将一下css代码跟html代码引入即可实现跟element-ui一样的loading效果了。
<style>\n .el-loading-mask {\n position: absolute;\n z-index: 2000;\n background-color: ■hsla(0, 0, 100%, ・9);\n margin: 0;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transition: opacity .3s;\n }\n .el-loading-spinner {\n top: 50%;\n margin-top: -21px;\n width: 100%;\n text-align: center;\n position: absolute;\n }\n .el-loading-spinner .circular {\n height: 42px;\n width: 42px;\n animation: loding-rotate 2s linear infinite;\n }\n .el-loading-spinner .path {\n animation: loading-dash 1.5s ease-in-out infinite;\n stroke-dasharray: 90, 150;\n stroke-dashoffset: 0;\n stroke-width: 2;\n stroke: #409eff;\n stroke-linecap: round;\n }\n @keyframes loading-rotate {\n 100% {\n transform: rotate (1turn);\n }\n }\n @keyframes loading-dash {\n 0% {\n stroke-dasharray: 1, 200;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -40px;\n }\n 100% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -120px;\n }\n }\n </style>\n <div class="el-loading-mask">\n <div class="el-loading-spinner">\n <svg class="circular" viewBox="0 0 50 50">\n <circle class="path" cx="25" cy="25" r="20" fill="none"></circle>\n </svg>\n </div>\n </div>\n