Vue2 vue3页面等待加载组件动画，纯代码

效果：

 代码：

<template>
	<view>
		<div class="card" :style="`transform:scale(${float}) ;`">
		  <div class="card__skeleton card__title"></div>
		  <div class="card__skeleton card__description">         </div>
		  <div class="card__skeleton card__description">         </div>
		</div>
	</view>
</template>

<script>
	export default {
		name:"page-loading",
		props:{
			float:{
				default:1.5
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped lang="scss">
.card {
  width:60%;
  padding:1rem .5rem;
  text-align: center;
  border-radius: .8rem;
  background-color: white;
  
  margin:20vh auto;
  box-shadow: 0 1px 30px 0 #eee;
}
.card__skeleton {
  background-image: linear-gradient(
		1010deg,
		#f7f7f7 0px,
		rgb(229 229 229 / 90%) 40px,
		#f9f9f9 500px
	);
  background-size: 300%;
  background-position: 100% 0;
  border-radius: inherit;
  margin:20rpx 0 0 0;
  animation: shimmer 1.5s infinite;
}

.card__title {
  height:30rpx;
  margin-bottom: 15px;
}

.card__description {
  height:25vh;
}

@keyframes shimmer {
  to {
    background-position: -100% 0;
  }
}

</style>

注册为组件直接在页面中调用即可：

float{整数} 作用：调整加载动画大小
默认为：1.5

			<page-loading float="1.6" v-if="ordersData.length===1"></page-loading>