制作一个loading组件,颜色,大小等内容都可以根据需求去修改
组件完整代码:
<template>
<div class="container">
<svg :width="width" :height="height" viewBox="0, 0, 80, 80" preserveAspectRatio="xMinYMid meet">
<circle
cx="40"
cy="40"
r="35"
fill="none"
:stroke="outsideColor"
stroke-width="4"
stroke-dasharray="147"
:stroke-linecap="lineCap"
>
<animateTransform
attributeName="transform"
type="rotate"
values="0 40 40; 360 40 40"
:dur="`${+duration}s`"
repeatCount="indefinite"
>
</animateTransform>
<animate
attributeName="stroke"
:values="outChange"
:dur="`${+duration * 2}s`"
repeatCount="indefinite"
>
</animate>
</circle>
<circle
cx="40"
cy="40"
r="25"
fill="none"
stroke="insideColor"
stroke-width="4"
stroke-dasharray="105"
:stroke-linecap="lineCap"
>
<animateTransform
attributeName="transform"
type="rotate"
values="360 40 40; 0 40 40"
:dur="`${+duration}s`"
repeatCount="indefinite"
>
</animateTransform>
<animate
attributeName="stroke"
:values="inChange"
:dur="`${+duration * 2}s`"
repeatCount="indefinite"
>
</animate>
</circle>
<circle
cx="40"
cy="40"
r="15"
fill="none"
stroke="insideColor"
stroke-width="4"
stroke-dasharray="60"
:stroke-linecap="lineCap"
>
<animateTransform
attributeName="transform"
type="rotate"
values="0 40 40; 360 40 40"
:dur="`${duration}s`"
repeatCount="indefinite"
>
</animateTransform>
<animate
attributeName="stroke"
:values="outChange"
:dur="`${+duration * 2}s`"
repeatCount="indefinite"
>
</animate>
</circle>
</svg>
<div class="loading-content"> <!--显示加载的文字啊什么的-->
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: 'loading',
props:{
width:{
type:[Number, String],
default: 400
},
height:{
type: [Number, String],
default: 400
},
outsideColor:{
type: String,
default: "#3be6cd"
},
insideColor:{
type: String,
default: "#02bcfe"
},
duration:{
type: [Number, String],
default: 2
},
lineCap:{ //半圆两边闭合方式,默认为方形
type: String,
default: "square"
}
},
data() {
return {
}
},
computed:{
outChange(){
return `${this.outsideColor}; ${this.insideColor}; ${this.outsideColor}`
},
inChange(){
return `${this.insideColor}; ${this.outsideColor}; ${this.insideColor}`
}
}
}
</script>
<style lang="stylus" scoped>
.container
position absolute
left 0
top 0
right 0
bottom 0
width 100%
height 100%
display flex
justify-content center
align-items center
flex-direction column
svg
margin-bottom 20px
</style>
在页面中使用时
一、引入loading组件,并进行注册
二、使用loading组件,并根据需求传入自定义参数
import svgLoading from "@/components/svgAnimation/loading"
components: { svgLoading },
<svg-loading
:outsideColor="'#20B2AA'"
:insideColor="'#00CED1'"
:duration="1.5"
:width="100"
:height="100"
:lineCap="'round'"
v-if="loading"
>
<div style="font-size:16px;color:yellow;">
数据加载中...
</div>
</svg-loading>