<template>
<svg
class="load"
viewBox="25 25 50 50"
:style="{ width: loadWidth, height: loadWidth }"
>
<circle class="loading_bg" cx="50" cy="50" r="20" fill="none" />
<circle class="loading" cx="50" cy="50" r="20" fill="none" />
</svg>
</template>
<script>
export default {
props: {
width: {
type: [Number, String],
default: 18,
},
},
computed: {
loadWidth() {
const isNumber = /^\d+$/.test(this.width);
return isNumber ? `${this.width}px` : this.width;
},
},
};
</script>
<style>
@keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 130, 200;
stroke-dashoffset: -50;
}
100% {
stroke-dasharray: 130, 200;
stroke-dashoffset: -125;
}
}
.loading {
stroke: #ffffff;
stroke-width: 3;
fill: none;
animation: dash 1.5s linear infinite;
}
.loading_bg {
stroke: var(--loadingBgColor);
stroke-width: 3;
fill: none;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.load {
animation: rotate 1.5s linear infinite;
}
</style>
标签：200,loading,svg,width,stroke,rotate,dashoffset,css From： https://www.cnblogs.com/coolestcode/p/17878991.html