svg implementation of circular progress bar

[PrototypeChain]

html
matters needing attention：
viewBox fill canvas;
:stroke-dasharray Perimeter;
:stroke-dashoffset Proportion of non transparency;

<svg :width="size"
             :height="size"
             viewBox="0 0 100 100">
            <!-- bgc -->
            <circle r="50" cx="50" cy="50"
                    fill="transparent"
                    ref="pbgc"
                    class="progress-bgc"></circle>
            <!-- bar -->
            <circle r="50" cx="50" cy="50"
                    fill="transparent"
                    ref="pbar"
                    :stroke-dasharray="dashArray"
                    :stroke-dashoffset="dashOffset"
                    class="progress-bar"></circle>
        </svg>
 

css
matters needing attention：
Transform-origin Operate by Center;
Transform:route(-90deg) Rotate 90°CCW;

circle {
        stroke-width: 6px;
        transform-origin: center;
    }
 
    .progress-bgc {
        transform: scale(0.9);
        /*stroke: rgba(66, 66, 66, 0.5);*/
    }
 
    .progress-bar {
        /*stroke: rgb(66, 66, 66);*/
        transform: rotate(-90deg) scale(0.9);
    }
 

js
The following is the property value passed in through the tag setting property:

            size: {
                type: Number,
                default: 100
            },
            percent:{
                type:Number,
                default:0
            },
 

Perimeter and incoming progress are calculated:

data(){
            return{
                dashArray:Math.PI * 2 * 50
            }
        },
        computed:{
            dashOffset(){
                return (1 - this.percent) * this.dashArray //  clockwise,it is necessary to take the anti operation
            }
        }