CSS 원형 진행률 생성기
SVG 원형 프로그레스 바를 색상·크기까지 조절해 코드로 추출
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
진행률, 크기, 선 두께, 색상, 애니메이션 속도를 슬라이더로 조절하면서 원형 프로그레스 바를 실시간으로 미리 보고 SVG·CSS 코드를 바로 복사할 수 있는 도구입니다. 대시보드, 로딩 표시, 통계 카드 등에 넣을 원형 게이지를 디자인하려는 개발자와 디자이너에게 유용하며, 모든 계산과 미리보기는 브라우저 안에서만 처리되어 서버로 아무것도 전송되지 않습니다.
사용 방법
- 슬라이더로 진행률(%), 선 두께, 원 크기를 원하는 값으로 조절합니다.
- 진행 색상, 배경(트랙) 색상, 텍스트 색상을 컬러 피커나 코드 입력으로 지정합니다.
- 중앙 텍스트 표시 여부와 트랜지션 애니메이션 사용 여부, 애니메이션 시간을 설정합니다.
- 실시간 미리보기로 결과를 확인한 뒤 SVG 코드나 CSS 코드를 복사해 프로젝트에 붙여넣습니다.
자주 묻는 질문
- 생성된 코드를 리액트나 뷰 프로젝트에 그대로 써도 되나요?
- 네, 순수 SVG 마크업이라 어떤 프레임워크에도 붙여넣어 사용할 수 있으며, 필요하면 stroke-width 등 속성만 카멜케이스로 바꿔 JSX에서 사용하면 됩니다.
- 진행률이 바뀔 때 애니메이션이 자동으로 재생되나요?
- 트랜지션 애니메이션을 켜면 CSS transition이 stroke-dashoffset 값에 적용되어, 진행률을 실제 화면에서 동적으로 바꿀 때 부드럽게 채워지는 효과가 나타납니다.
- 입력한 값이 서버에 저장되나요?
- 아니요, 모든 계산과 SVG 렌더링은 브라우저 내에서만 이루어지며 별도로 저장되거나 전송되지 않습니다.