CSS 实现微信小程序半圆无线滚动（过渡动画）

效果图如下所示

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

对你有帮助的话记得收藏点赞，有什么问题欢迎评论留言。