uniapp加载动画

感觉还是好看的

---

前言

感觉之前的太丑了就自己弄了一个组件

---

上才艺~~~~

一、组件代码？

<template>
	<view v-if="show" class="loader-container">
		<view class="loader">
			<view></view>
			<view></view>
			<view></view>
			<view></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			}
		}
	}
</script>

<style scoped>
	.loader-container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.3);
		/* 半透明灰色背景 */
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
	}

	.loader {
		height: 120px;
		width: 120px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.loader view {
		height: 30px;
		width: 30px;
		position: absolute;
		animation: move 4s infinite;
	}

	.loader view:nth-child(1) {
		background-color: rgb(158, 136, 246);
		box-shadow: rgb(158, 136, 246) 0px 7px 29px 0px;
		transform: translate(-30px, -30px);
		animation-delay: -1s;
	}

	.loader view:nth-child(2) {
		background-color: rgb(97, 183, 253);
		box-shadow: rgb(97, 183, 253) 0px 7px 29px 0px;
		transform: translate(30px, -30px);
		animation-delay: -2s;
	}

	.loader view:nth-child(3) {
		background-color: rgb(95, 249, 175);
		box-shadow: rgb(95, 249, 175) 0px 7px 29px 0px;
		transform: translate(30px, 30px);
		animation-delay: -3s;
	}

	.loader view:nth-child(4) {
		background-color: rgb(243, 171, 89);
		box-shadow: rgb(243, 171, 89) 0px 7px 29px 0px;
		transform: translate(-30px, 30px);
		animation-delay: -4s;
	}

	@keyframes move {
		0% {
			transform: translate(-30px, -30px);
		}

		25% {
			transform: translate(30px, -30px);
		}

		50% {
			transform: translate(30px, 30px);
		}

		75% {
			transform: translate(-30px, 30px);
		}

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

二、使用步骤

1.引入库

代码如下（示例）：

import loadAnimation from '@/components/load-animation/load-animation.vue';

2.写入

代码如下（示例）：

<load-animation :show="isLoading" />

isLoading 字段 true 显示 false 隐藏

---

总结