1. <template>
    2.   <div class="circle-box">  
    4.     <svg class="circular" viewBox="25 25 50 50">
    5.         <circle :style="'stroke-dasharray: 126, 126;'" class="path2" cx="50" cy="50" r="20" fill="none"/>
    6.         <circle :style="'stroke-dasharray: '+(num/100) * 126+', 126;'" class="path" cx="50" cy="50" r="20" fill="none"/>
    7.     </svg> 
    9.     <div class="num">
    10.         {{num}}%
    11.     </div>
    13.    </div>
    14. </template>
    15. <script>
    16.     export default {
    17.       props:{
    18.           num:{
    19.               type:Number,
    20.               default:0
    21.           }
    22.       },
    23.       data(){
    24.         return{
    26.         }
    27.       }
    28.     }
    29. </script>
    30. <style lang="less" scoped>
    31.   .circular {
    32.     width: 100%;
    33.     height: auto;
    34.     transform: rotate(-90deg);
    35.     position: relative;
    36.   }
    38.   .path {
    39.     animation: loading-dash 1.5s ease-in-out infinite;
    40.     stroke-dashoffset: 0;
    41.     stroke-width: 5; 
    42.     stroke: #bdb297; 
    43.     z-index: 99;
    44.     transition: stroke-dasharray .5s;
    45.   } 
    48.   .path2{
    49.     stroke-dashoffset: 0;
    50.     stroke-width: 5; 
    51.     stroke: #444445;
    52.   }
    55. .num{
    56.     position: absolute;
    57.     top:0;
    58.     width: 100%;
    59.     height: 100%;
    60.     display: flex;
    61.     color: #bdb297;
    62.     font-size: 32upx;
    63.     align-items: center;
    64.     justify-content: center;
    65.     margin: auto;
    66. }
    70. .circle-box{
    71.   position: relative;
    72.   width: 100%;
    73.   height: 100%; 
    74. }
    76. </style>