svg id="svg1" xmlns="http://www.w3.

org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="200" viewBox="0 0 120 120" >

<!-- Фон серого цвета -->

<rect width="100%" height="100%" fill="#F3F3F3" />
<!-- Путь заполнения линии прогрессбара -->
<circle cx="60" cy="60" r="50" fill="none" stroke="#E1E1E1" stroke-width="12"/>
<circle cx="60" cy="60" r="50" transform="rotate(-90 60 60)" fill="none"
stroke-dashoffset="314" stroke-dasharray="3.14, 3.14" stroke="#A023FF" stroke-
width="12" >
<!-- Анимация вращения с помощью сдвига командой stroke-dashoffset -->
<animate attributeName="stroke-dashoffset" dur="6s" begin="svg1.click"
values="314;0" fill="freeze" />
</circle>
<text id="count" x="50%" y="50%" fill="#622B80" text-anchor="middle" dy="7"
font-size="20">Click</text>

</svg>