NewZkgj/components/loading/index.vue

<template>
	<view class="pages" v-if="value">
		<div class="donut"></div>
	</view>
</template>

<script>
	export default {
		name: '加载组件',
		props: {
			// v-model绑定的变量
			value: {
				type: Boolean,
				default: false
			},
		},
	}
</script>

<style lang="scss" scoped>
	.pages {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999999;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #fff;

		.donut {
			margin-top: 35vh;
			display: inline-block;
			border: 10rpx solid rgba(0, 0, 0, 0.1);
			border-left-color: #1296db;
			border-radius: 50%;
			width: 150rpx;
			height: 150rpx;
			animation: donut-spin 1.2s linear infinite;
		}
	}



	@Keyframes donut-spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>