当前位置：网站首页>unapp封装一个加载动画

unapp封装一个加载动画

2022-04-22 02:15:00 【你的美，让我痴迷】 

<!-- 封装一个可以使用的数据加载动画 -->
<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>

版权声明
本文为[你的美，让我痴迷]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_45932157/article/details/124320017

边栏推荐

猜你喜欢

随机推荐