MiniPrograms/components/loading/loading.vue

<!-- 加载动画组件 -->
<template>
	<view class="flex">
		<view class="sk-folding-cube">
			<view class="sk-cube1 sk-cube"></view>
			<view class="sk-cube2 sk-cube"></view>
			<view class="sk-cube4 sk-cube"></view>
			<view class="sk-cube3 sk-cube"></view>
		</view>
		<view class="YS-title loading">正在加载中...</view>
	</view>
</template>

<script>
	export default {
		name: "loading",
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.flex {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.loading{
		margin-top: 20rpx;color: #555555;
	}

	.sk-folding-cube {
		margin: 20px auto;
		width: 40px;
		height: 40px;
		position: relative;
		-webkit-transform: rotateZ(45deg);
		transform: rotateZ(45deg);
	}

	.sk-folding-cube .sk-cube {
		float: left;
		width: 50%;
		height: 50%;
		position: relative;
		-webkit-transform: scale(1.1);
		-ms-transform: scale(1.1);
		transform: scale(1.1);
	}

	.sk-folding-cube .sk-cube:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #555555;
		-webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
		animation: sk-foldCubeAngle 2.4s infinite linear both;
		-webkit-transform-origin: 100% 100%;
		-ms-transform-origin: 100% 100%;
		transform-origin: 100% 100%;
	}

	.sk-folding-cube .sk-cube2 {
		-webkit-transform: scale(1.1) rotateZ(90deg);
		transform: scale(1.1) rotateZ(90deg);
	}

	.sk-folding-cube .sk-cube3 {
		-webkit-transform: scale(1.1) rotateZ(180deg);
		transform: scale(1.1) rotateZ(180deg);
	}

	.sk-folding-cube .sk-cube4 {
		-webkit-transform: scale(1.1) rotateZ(270deg);
		transform: scale(1.1) rotateZ(270deg);
	}

	.sk-folding-cube .sk-cube2:before {
		-webkit-animation-delay: 0.3s;
		animation-delay: 0.3s;
	}

	.sk-folding-cube .sk-cube3:before {
		-webkit-animation-delay: 0.6s;
		animation-delay: 0.6s;
	}

	.sk-folding-cube .sk-cube4:before {
		-webkit-animation-delay: 0.9s;
		animation-delay: 0.9s;
	}

	@-webkit-keyframes sk-foldCubeAngle {

		0%,
		10% {
			-webkit-transform: perspective(140px) rotateX(-180deg);
			transform: perspective(140px) rotateX(-180deg);
			opacity: 0;
		}

		25%,
		75% {
			-webkit-transform: perspective(140px) rotateX(0deg);
			transform: perspective(140px) rotateX(0deg);
			opacity: 1;
		}

		90%,
		100% {
			-webkit-transform: perspective(140px) rotateY(180deg);
			transform: perspective(140px) rotateY(180deg);
			opacity: 0;
		}
	}

	@keyframes sk-foldCubeAngle {

		0%,
		10% {
			-webkit-transform: perspective(140px) rotateX(-180deg);
			transform: perspective(140px) rotateX(-180deg);
			opacity: 0;
		}

		25%,
		75% {
			-webkit-transform: perspective(140px) rotateX(0deg);
			transform: perspective(140px) rotateX(0deg);
			opacity: 1;
		}

		90%,
		100% {
			-webkit-transform: perspective(140px) rotateY(180deg);
			transform: perspective(140px) rotateY(180deg);
			opacity: 0;
		}
	}
</style>