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);
		}

	}
相关推荐
ZL_56713 小时前
uniapp中使用uni-forms实现表单管理,验证表单
前端·javascript·uni-app
1登峰造极1 天前
uniapp中uni-popup在小程序中滚动穿透问题
小程序·uni-app
printf_8241 天前
uniapp内嵌的webview H5与应用通信
uni-app
AscendKing1 天前
uniapp介入极光推送教程 超级详细
uni-app·极光推送
new出一个对象1 天前
uniapp实现APP版本升级
uni-app
软件聚导航1 天前
uniapp 安卓和ios震动方法,支持息屏和后台震动,ios和安卓均通过测试
android·ios·uni-app
秋田君1 天前
uniapp跨域问题解决方案
uni-app
T^T尚1 天前
uniapp H5上传图片前压缩
前端·javascript·uni-app
new出一个对象2 天前
uniapp的renderjs使用
uni-app
碎像2 天前
uni-app 发布媒介功能(自由选择媒介类型的内容) 设计
uni-app