css svg 加载动画

html

<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>

css

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

.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  ***************************************************** */