Преобразовать прогресс-бар в виде линии в кружок

Есть вот такой вот прогресс-бар в виде линии

<div class="rating__nextlevel__progress">
    <div class="progress-bar">
        <div class="percent-count"></div>
    </div>
</div>

let points = 50
    let target = 100
    const progress = document.querySelector('.progress-bar');
    let percent = document.querySelector('.percent-count');
    let result = (points * 100) / target;
    setTimeout(() => {
        progress.style.opacity = 1;
        progress.style.width = result + '%';
        percent.textContent = Math.round(result) + '%';
    })

Нужно преобразовать его в что-то подобное в виде круга

Как можно это на чистом сделать? Интересует именно создание из прямой линии окружности с пустым пространством внутри, заполнение линии цветом не надо.