uniapp css加载中动画效果

文章描述:

uniapp css加载中动画效果

template

<template>
	<view>
		<view class="loadingIco" >
			 <image src="../../static/images/common/loading.png" mode=""></image>
			 <view class="titile">正在加载...</view>
		</view>
	</view>
</template>

script

export default {
	name:"ico_animation",
	data() {
		return {
				
		};
	}
}

style

.loadingIco{
 	   margin: 100px auto;
 	   text-align: center;
 	   image{
 		   width: 50px;
 		   height: 50px;
 		   animation: anim  1.5s  linear  infinite;
 	   }
 	   .titile{
 		   margin-top: 10px;
 	   }
}
@keyframes  anim{
 	0%{
 		transform: rotate(0);
 	}
 	100%{
 		transform: rotate(360deg);
 	}
}

 

发布时间:2022/09/17

发表评论