css svg 加载动画

Posted 2023-03-09

参考技术A <div class="el-loading-mask is-fullscreen">

<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">Loading…</p>

</div>

</div>

/* ******************* 加载动画 **************************** */

.el-loading-mask.is-fullscreen position: fixed;

.el-loading-mask background-color: hsla(0,0%,100%,.4)!important;

.el-loading-mask position: absolute; z-index: 10000; background-color: hsla(0,0%,100%,.9); margin: 0; top: 0; right: 0; bottom: 0; left: 0; transition: opacity .3s;

.el-loading-mask.is-fullscreen .el-loading-spinner margin-top: -25px;

.el-loading-spinner top: 50%; margin-top: -21px; width: 100%; text-align: center; position: absolute;

.el-loading-mask.is-fullscreen .el-loading-spinner .circular width: 50px; height: 50px;

.el-loading-spinner .circular width: 42px; height: 42px; animation: loading-rotate 2s linear infinite;

svg:not(:root) overflow: hidden;

.el-loading-spinner .el-loading-text color: #ff495e !important;

.el-loading-spinner .el-loading-text color: #20a0ff; margin: 3px 0; font-size: 14px;

.el-loading-spinner .path stroke: #ff495e !important;

.el-loading-spinner .path

    animation: loading-dash 1.5s ease-in-out infinite;

    stroke-dasharray: 90,150;

    stroke-dashoffset: 0;

    stroke-width: 2;

    stroke: #20a0ff;

    stroke-linecap: round;



@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



/* ********************** 加载动画end  ***************************************************** */