unapp封装一个加载动画

<!-- 封装一个可以使用的数据加载动画 -->
<template>
	<view>
		<view class="loadingIco" >
			 <image src="../../static/images/loading.png" mode=""></image>
			 <view class="titile">正在加载...</view>
		</view>
	</view>
</template>

<script>
	export default {
    
    
		name:"ico_animation",
		data() {
    
    
			return {
    
    
				
			};
		}
	}
</script>

<style lang="scss">
 .loadingIco{
    
    
	   margin: 100px auto;
	   text-align: center;
	   image{
    
    
		   width: 50px;
		   height: 50px;
		   animation: anim  3s  linear  infinite;
	   }
	   .titile{
    
    
		   margin-top: 10px;
	   }
   }
   @keyframes  anim{
    
    
	   0%{
    
    
		   transform: rotate(0);
	   }
	   100%{
    
    
		   transform: rotate(360deg);
	   }
   }
</style>

猜你喜欢

转载自blog.csdn.net/weixin_45932157/article/details/124320017
今日推荐