uniapp封装loading 的动画动态加载

实现效果

html代码

html 复制代码
<view class="loadBox" v-if="loading">
	<img :src="logo" class="logo">
</view>

css代码

css 复制代码
.loadBox {
		width: 180rpx;
		min-height: 180rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		.logo {
			width: 160rpx;
			border-radius: 50%;
			position: relative;
			vertical-align: middle;
		}
	}

	@keyframes loading {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		to {
			-webkit-transform: rotate(1turn);
			transform: rotate(1turn);
		}

	}
相关推荐
racerun31 分钟前
UniApp中的pages.json 和 tabBar
uni-app·json
米粒宝的爸爸1 天前
uniapp在app端,在导航栏设置自定义按钮
uni-app
dssxyz1 天前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
xw51 天前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app
!win !1 天前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
颜渊呐1 天前
uniapp中APPwebview与网页的双向通信
前端·uni-app
白杨木影子被拉长1 天前
多状态映射不同样式(scss语法)
vue.js·uni-app
一念杂记1 天前
免费开源!微信小程序商城源码,快速搭建你的线上商城系统!
微信小程序·uni-app
aklry2 天前
uniapp三步完成生成一维码图片
uni-app
雪芽蓝域zzs2 天前
uniapp 国密sm2加密
uni-app