You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
69 lines
1.8 KiB
69 lines
1.8 KiB
2 years ago
|
<template>
|
||
|
|
<div class="screen-loading">
|
||
|
|
<svg width="50px"
|
||
|
|
height="50px">
|
||
|
|
<circle cx="25"
|
||
|
|
cy="25"
|
||
|
|
r="20"
|
||
|
|
fill="transparent"
|
||
|
|
stroke-width="3"
|
||
|
|
stroke-dasharray="31.415, 31.415"
|
||
|
|
stroke="#29cdff"
|
||
|
|
stroke-linecap="round">
|
||
|
|
<animateTransform attributeName="transform"
|
||
|
|
type="rotate"
|
||
|
|
values="0, 25 25;360, 25 25"
|
||
|
|
dur="1.5s"
|
||
|
|
repeatCount="indefinite" />
|
||
|
|
<animate attributeName="stroke"
|
||
|
|
values="#02bcfe;#3be6cb;#02bcfe"
|
||
|
|
dur="3s"
|
||
|
|
repeatCount="indefinite" />
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<circle cx="25"
|
||
|
|
cy="25"
|
||
|
|
r="10"
|
||
|
|
fill="transparent"
|
||
|
|
stroke-width="3"
|
||
|
|
stroke-dasharray="15.7, 15.7"
|
||
|
|
stroke="#29cdff"
|
||
|
|
stroke-linecap="round">
|
||
|
|
<animateTransform attributeName="transform"
|
||
|
|
type="rotate"
|
||
|
|
values="360, 25 25;0, 25 25"
|
||
|
|
dur="1.5s"
|
||
|
|
repeatCount="indefinite" />
|
||
|
|
<animate attributeName="stroke"
|
||
|
|
values="#3be6cb;#02bcfe;#3be6cb"
|
||
|
|
dur="3s"
|
||
|
|
repeatCount="indefinite" />
|
||
|
|
</circle>
|
||
|
|
</svg>
|
||
|
|
<div class="loading-tip">
|
||
|
|
<slot></slot>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'DvLoading'
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.screen-loading {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
.loading-tip {
|
||
|
|
font-size: 14px;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|