Progress ring

Make an animation where a circular progress indicator fills from 0% to [target percent]%. The ring is [ring colour] with rounded ends. The number in the middle rises at the same speed as the ring, with "[label]" written small underneath. When full, the ring grows slightly once and settles back.

Put CSS and JavaScript in a single HTML file. Don't use external libraries or images, and draw in a 16:9 area in the centre of the screen. If prefers-reduced-motion is on, show the final scene without motion.

원형 진행 표시가 0%에서 [목표 퍼센트]%까지 차오르는 애니메이션을 만들어 주세요. 링은 [링 색]이고 끝이 둥글어요. 가운데 숫자도 링과 같은 속도로 올라가고, 아래에 "[이름]"을 작게 적어요. 다 차면 링이 한 번 살짝 커졌다 돌아와요.

HTML 파일 하나에 CSS와 JavaScript를 넣어 주세요. 외부 라이브러리와 이미지는 쓰지 말고, 화면 가운데 16:9 영역에 그려 주세요. prefers-reduced-motion이 켜져 있으면 움직임 없이 마지막 장면을 보여 주세요.