<template>
	<view>
		<view class="box">
		   <view class="left_box">
		     <view class="left_item moving_left"></view>
		   </view>
		   
		   <view class="right_box">
		     <view class="right_item moving_right"></view>
		   </view>
		   
		   <view class="mask">3</view>
		 </view>
	</view>
</template>


<style scoped>
  .box{
      /* 最外层的盒子 */
      width:160upx;
      height:160upx;
      margin: 0 auto;
     position: relative;
      overflow: hidden;
      border-radius: 50%;
      background-color: #ffac44;
    }
    .left_box,.right_box{
      /* 
        左右两边用于 隐藏 旋转的div的盒子 
        通过overflow来隐藏内部div旋转出去的部分
      */
      position: absolute;
      top: 0;
      width:81upx; /* 不知道为什么不多一个像素会有空隙*/
      height:160upx;
      overflow: hidden;
      z-index: 1;
    }


    .left_box{
      left: 0;
    }


    .right_box{
      right: 0;
    }


    .left_item,.right_item{
      width: 81upx;
      height: 160upx;
	  background-color: #ffd298;
    }
    .left_item{
      /*
       1.设置圆角，圆角大小为高度的一半
       2.这只旋转的中心店，这是左边圆，中心点设置到右边中心点，右边圆则设置到左边中心点
       */
      border-top-left-radius: 80upx;
      border-bottom-left-radius: 80upx;
    }
	
	.moving_left{
		transform-origin: right center;
		transform: rotate(180deg);
		animation: loading_left 1s linear infinite;
	}
	
    .right_item{
      border-top-right-radius: 80upx;
      border-bottom-right-radius: 80upx;
    }
	.moving_right{
		transform-origin: left center;
		transform: rotate(180deg);
		animation: loading_right 1s linear infinite;
	}
	
    .mask{
      /* 遮住div多余的部分，呈现出线条的效果 */
      position: absolute;
      top: 25upx;
      left: 25upx;
      right: 25upx;
      bottom: 25upx;
      z-index: 2;
      border-radius: 50%;
      background-color: #fff;
	  color: red;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  font-size: 40rpx;
	  font-weight: bold;
    }


	
    @keyframes loading_left{
        0%{
            transform: rotate(0deg);
        }
        50%{
            transform: rotate(0deg);
        }
        100%{
            transform: rotate(180deg);
        }
    }


    @keyframes loading_right{
        0%{
          transform: rotate(0deg);
        }
        50%{
          transform: rotate(180deg);
        }
        100%{
          transform: rotate(180deg);
        }
    }
</style>