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

ppylox
·2/19/2023·0 阅读
AI 摘要模型根据正文自动生成,仅供参考

本文介绍如何从element-ui组件库中单独提取loading加载效果的代码,以便在任意HTML文件中使用。只需引入提供的CSS样式和HTML结构,即可实现与element-ui一致的loading效果。核心代码包括遮罩层(el-loading-mask)、旋转容器(el-loading-spinner)、SVG圆形动画(circular)及路径动画(path),并通过loading-rotate和loading-dash两个关键帧实现旋转与描边动画。

由于项目中有使用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


相关文章

评论 (0)

暂无评论,来写第一条吧