css实现圆环进度条

vue组件

<template>
  <div class='container'>
      <div class="left">
          <div class="leftcircle"></div>
      </div>
      <div class="right">
          <div class="rightcircle"></div>
      </div>
  </div>
</template>

<script>
export default {
  mounted(){
      
  },
  methods: {
      
  }

}


</script>

<style lang="scss">
  .container{
    display:flex;
    width: 160px;
    height: 160px;
  }
  .left{
      width: 79px;
      height: 160px;
      position: relative;
      overflow: hidden;
      background: pink;
  }
.leftcircle{
    width: 160px;
    height: 160px;
    border: 20px solid white;
    position: absolute;
    border-radius: 50%;
    left: 0px;
    top:0px;
    border-bottom: 20px solid orange;
    border-left: 20px solid orange;
    transform: rotate(45deg);
    animation-name:circle_left;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

}
.right {
    width: 79px;
    height: 160px;
    position: relative;
    overflow: hidden;
    background-color: pink;
}
.rightcircle {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 20px solid white;
    position: absolute;
    border-top: 20px solid orange;
    border-right: 20px solid orange;
    right: 0px;
    top: 0px;
    animation-name: circle_right;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    transform: rotate(-135deg);
}

@keyframes circle_right {
    0% {
        transform: rotate(-135deg);
    }

    50%,100% {
        transform: rotate(45deg);
    }
}
@keyframes circle_left {
    0%,50% {
        transform: rotate(-135deg);
    }

    100% {
        transform: rotate(45deg);
    }
}
</style>