JSFiddle - React, Tailwind, and code Playground

HTML

<div class="progress-circle"></div>


<!-- При нажатии на Окей должно меняться значение значение прогресс бара -->

CSS

.progress-track {
    transform-origin: center;
    transform: rotate(-90deg);
}

.progress-thumb {
    transition: .5s ease;
}

.progress-bg {
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: solid;
    border-color: $softgrey;
    border-radius: 50%;
    position: absolute;
}

.progress {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-top: 10px;
}

JavaScript

const init = (type, size, stroke, pieStroke, textStatus=[]) => {
    let progressType = type ?? 'circle'
    let statusSize = textStatus.size ?? '15'
    let statusWeight = textStatus.weight ?? '500'
    let strokeType = ''
    let strokeColor = '#FFFFFF'
    let statusView = ''
    let stokeWidth = stroke ?? 3
    let pieBorder = pieStroke ?? 2
    let progressBorder = `style="width: ${size + stokeWidth}px; height: ${size + stokeWidth}px; border: ${pieBorder}px solid; border-color: #5fca7a;"`
    let progressBg = ''
    const radius = size / 2 - stokeWidth / 2
    if (textStatus.enabled) {
        statusView = `<span style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: ${statusWeight}; font-size: ${statusSize}px;">100%</span>`
    }
    if (progressType === 'circle') {
        strokeType = 'stroke-linecap="round"'
        strokeColor = '#e6e6e6'
        progressBorder = ''
        progressBg = `<div class="progress-bg" style="border-width: ${stokeWidth}px;"></div>`
    }
    return `
        <div class="progress" ${progressBorder}>${progressBg}
            <svg class="progress-track"
                style="width: ${size}px; height: ${size}px;">
                <circle class="progress-thumb"
                stroke="#5fca7a" ${strokeType} stroke-width="${stokeWidth}" cx="${size / 2}" cy="${size / 2}" r="${radius}" fill="transparent"></circle>
            </svg>
            ${statusView}
        </div>
        `
}

class Progress {
    constructor(selector, options) {
        this.$el = document.querySelector(selector)
        this.options = options

        this.render()

        this.$thumb = document.querySelector(`${selector} .progress-thumb`)
        this.$progress = document.querySelector(`${selector} span`)
        this.$pieBorder = document.querySelector(`${selector} .progress`)
    }

    render() {
        const {type, size, stroke, pieStroke, textStatus} = this.options
        this.$el.style.width = size + 'px';
...