Для создания круглого прогресс-бара с круглым индикатором на конце, можно воспользоваться SVG и CSS.
Пример кода:
```html
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="none" stroke="#ccc" stroke-width="6"/>
<circle cx="50" cy="50" r="40" fill="none" stroke="#ff5733" stroke-width="6" stroke-dasharray="251.2" stroke-dashoffset="0" class="progress"/>
</svg>
<style>
.progress {
transition: stroke-dashoffset 1s;
}
</style>
```
В данном примере, мы создаем два `<circle>` элемента внутри `<svg>`. Первый элемент представляет собой базовый круг прогресс-бара с серым цветом и шириной обводки 6. Второй элемент представляет индикатор прогресса с оранжевым цветом и также шириной обводки 6. Мы используем атрибут `stroke-dasharray="251.2"` чтобы задать длину обводки круга (умноженную на `2πr`), и `stroke-dashoffset="0"` чтобы начальное значение прогресса было равно 0.
Далее, для анимации прогресса, мы добавляем класс `.progress` с CSS свойством `transition: stroke-dashoffset 1s;`. Это делает анимацию прогресса плавной и с задержкой 1 секунду.
Таким образом, при изменении значения свойства `stroke-dashoffset` с помощью JavaScript, прогресс-бар будет анимированно обновляться.
Надеюсь, это поможет вам создать желаемый эффект для круглого прогресс-бара с круглой индикатором на конце. Если у вас возникнут дополнительные вопросы, не стесняйтесь спрашивать.