CSS实现loading动画

<template>
	<view class="container" v-show="loadingShow">
		<view class="load">
			<text></text>
			<text></text>
			<text></text>
			<text></text>
			<text></text>
			<text></text>
			<text></text>
			<text></text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		computed: {
			//计算属性判断vuex中的显示状态
			loadingShow() {
				return this.$store.state.requestLoading;
			}
		},
		onshow() {
			console.log(111)
			this.show()
		},
		methods: {
			show() {
				console.log(111)
				uni.showLoading({
					title: '加载中',
					mask: 'true'
				});
			}
		}
	};
</script>

<style>
	.container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 198903060;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.container image {
		width: 350rpx;
	}

	.load {
		width: 180rpx;
		height: 180rpx;
		position: relative;
		margin: 0 auto;
	}

	.load text {
		display: inline-block;
		opacity: 0.1;
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		background: #DE3E3E;
		position: absolute;
		-webkit-animation: load 1.04s ease infinite;
	}

	@-webkit-keyframes load {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0.1;
		}
	}

	.load text:nth-child(1) {
		left: 5px;
		top: 50%;
		margin-top: -8px;
		-webkit-animation-delay: 0.13s;
	}

	.load text:nth-child(2) {
		left: 15px;
		top: 15px;
		-webkit-animation-delay: 0.26s;
	}

	.load text:nth-child(3) {
		left: 50%;
		top: 5px;
		margin-left: -8px;
		-webkit-animation-delay: 0.39s;
	}

	.load text:nth-child(4) {
		top: 15px;
		right: 15px;
		-webkit-animation-delay: 0.52s;
	}

	.load text:nth-child(5) {
		right: 5px;
		top: 50%;
		margin-top: -8px;
		-webkit-animation-delay: 0.65s;
	}

	.load text:nth-child(6) {
		right: 15px;
		bottom: 15px;
		-webkit-animation-delay: 0.78s
	}

	.load text:nth-child(7) {
		bottom: 5px;
		left: 50%;
		margin-left: -8px;
		-webkit-animation-delay: 0.91s;
	}

	.load text:nth-child(8) {
		bottom: 15px;
		left: 15px;
		-webkit-animation-delay: 1.04s;
	}
</style>