svg实现简单的loading

html

<div class="loader">
    <svg width="100" height="100">
        <polygon class="triangle" fill="none" stroke="#7eccd8" stroke-width="4" points="50,1 99,99 1,99"/>
    </svg>
</div>

css

//设置实线和虚线的宽度
stroke-dasharray: 50 30;
//引用dash动画，动画时长2.5s
-webkit-animation:dash 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;

.loader {
    width: 100px;
    height: 100px;
    position:absolute;
    right:0;
    left:0;
    margin:auto;
    top:0;
    bottom:0;
    z-index:3
}
.loader .triangle {
    stroke-dasharray: 50 30;
    -webkit-animation:dash 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;
    -moz-animation:dash 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;
    -ms-animation:dash 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;
    -o-animation:dash 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;
    animation:dash 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite
}]
//命名dash，动画写划线的距离
@-webkit-keyframes dash {
    to {
        stroke-dashoffset:500
    }
}
@-moz-keyframes dash {
    to {
        stroke-dashoffset:500
    }
}
@-ms-keyframes dash {
    to {
        stroke-dashoffset:500
    }
}
@-o-keyframes dash {
    to {
        stroke-dashoffset:500
    }
}
@keyframes dash {
    to {
        stroke-dashoffset:500
    }
}