<template>
	<view class="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>
