You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
1.0 KiB
Vue
67 lines
1.0 KiB
Vue
2 months ago
|
<template>
|
||
|
|
<view data-remark='省略号' class="g-rh-dot loader" :class="column ? '' : 'g_flex_row_start'">
|
||
|
|
<view class="dot"></view>
|
||
|
|
<view class="dot"></view>
|
||
|
|
<view class="dot"></view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {};
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
column: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
created() {},
|
||
|
|
|
||
|
|
methods: {},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
/* 容器样式 */
|
||
|
|
.loader {
|
||
|
|
// display: flex;
|
||
|
|
// justify-content: center;
|
||
|
|
// align-items: center;
|
||
|
|
// height: 100vh; /* 使容器占据整个视口的高度 */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 单个点的样式 */
|
||
|
|
.dot {
|
||
|
|
width: 6px;
|
||
|
|
height: 6px;
|
||
|
|
margin: 0 2px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background-color: #999;
|
||
|
|
animation: dotPulse 1s infinite ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 动画定义 */
|
||
|
|
@keyframes dotPulse {
|
||
|
|
0%,
|
||
|
|
80%,
|
||
|
|
100% {
|
||
|
|
transform: scale(0.75);
|
||
|
|
}
|
||
|
|
|
||
|
|
40% {
|
||
|
|
transform: scale(1.25);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 第二个点的延时 */
|
||
|
|
.dot:nth-child(2) {
|
||
|
|
animation-delay: 0.33s;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 第三个点的延时 */
|
||
|
|
.dot:nth-child(3) {
|
||
|
|
animation-delay: 0.66s;
|
||
|
|
}
|
||
|
|
</style>
|