uniapp 实现类似v-loading加载效果

uniapp不支持自定义指令。

效果图如下：

在components下创建uni-loading同名目录和文件：

<template>
   // 代写代码  weixin781284440
	<view class="com__box">
		<view class="loading">
			<view class="shape shape-1"></view>
			<view class="shape shape-2"></view>
			<view class="shape shape-3"></view>
			<view class="shape shape-4"></view>
		</view>
	</view>
</template>

<style lang="scss">
	.com__box {
		position: absolute;
		top: 35%;
		left: calc((100% - 15px)/2);
	}

	.loading {
		width: 30px;
		height: 30px;
		position: relative;
		animation: animationContainer 1s ease infinite;
	}

	.shape {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		position: absolute;
	}

	.shape-1 {
		background-color: #1875e5;
		left: 0;
		animation: animationShape1 0.5s ease infinite alternate;
	}

	.shape-2 {
		background-color: #c5523f;
		right: 0;
		animation: animationShape2 0.5s ease infinite alternate;
	}

	.shape-3 {
		background-color: #499255;
		bottom: 0;
		animation: animationShape3 0.5s ease infinite alternate;
	}

	.shape-4 {
		background-color: #f2b736;
		right: 0;
		bottom: 0;
		animation: animationShape4 0.5s ease infinite alternate;
	}

	@keyframes animationContainer {
		0% {
			transform: rotate(0);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes animationShape1 {
		0% {
			transform: translate(0, 0);
		}

		100% {
			transform: translate(20px, 20px);
		}
	}

	@keyframes animationShape2 {
		0% {
			transform: translate(0, 0);
		}

		100% {
			transform: translate(-20px, 20px);
		}
	}

	@keyframes animationShape3 {
		0% {
			transform: translate(0, 0);
		}

		100% {
			transform: translate(20px, -20px);
		}
	}

	@keyframes animationShape4 {
		0% {
			transform: translate(0, 0);
		}

		100% {
			transform: translate(-20px, -20px);
		}
	}
</style>

在需要使用的文件中引入，通过v-if和v-else去判断加载。