效果图如下所示
.wxss
<view class="holder">
<view class="preloader">
<view></view>
</view>
</view>
.wxml
.holder{
width: 100%;
float: left;
height: 60rpx;
text-align: center;
position: relative;
margin-top: 100rpx;
}
.preloader {
position: absolute;
width: 60rpx;
height: 0%;
padding-bottom: 60rpx;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
.preloader view {
position: absolute;
width: 100%;
height: 100%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
overflow: hidden;
animation: animatePreloader 0.7s infinite linear;
transform-origin: 50% 100%;
}
.preloader view:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 50%;
top: 50%;
transform: translateX(-50%);
border: 1px solid #FF0505;
border-radius: 50%;
box-sizing: border-box;
}
@keyframes animatePreloader {
0% {
transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
}
100% {
transform: translateX(-50%) translateY(-50%) rotateZ(360deg);
}
}
对你有帮助的话记得收藏点赞,有什么问题欢迎评论留言。