标签：load 动画 loading text top nth animation webkit CSS

<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>

标签：load,动画,loading,text,top,nth,animation,webkit,CSS
来源： https://blog.csdn.net/qq_44417271/article/details/121262647

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。