模拟微信小程序加载动画

<template>
  <view class="container_app">
    <view class="circle">
		<image src="../../static/logo.png" mode=""></image>
    </view>
    <view class="dot"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
}
</script>

<style lang="less">
.container_app {
  position: fixed;
  width: 100%;
  height: 100%;
}

.circle {
  width: 150rpx;
  height: 150rpx;
  // background-color: skyblue;
  border-radius: 50%;
  position: absolute;
  top: 25%; 
  left: 50%;
  transform: translate(-50%,0);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 4rpx solid #F1F0F2;
  image{
	  width: 140rpx;
	  height: 140rpx;
	  border-radius: 50%;
  }
}

.dot {
  width: 10rpx;
  height: 10rpx;
  background-color: #56BD69;
  border-radius: 50%;
  position: absolute;
  top: calc(25% - 5rpx); /* 设置小圆的垂直位置为大圆的中心 */
  left: calc(50% - 5rpx); /* 设置小圆的水平位置为大圆的边缘 */
  transform-origin: 25% 82rpx; /* 将旋转中心设置为小圆自身的中心 */
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg) translateX(0); /* 初始位置 */
  }
  to {
    transform: rotate(360deg) translateX(0); /* 绕圆心旋转 */
  }
}
</style>

效果：绿圆会围着轨道旋转