SVG 원형 프로그레스 바 원주 수식 공식과 CSS stroke-dashoffset 가이드

직접 해보기 →

대시보드 통계 카드, 스킬 점수 차트, 파일 업로드 대기 화면 등에서 상태 진행 비율(%)을 가시적으로 렌더링할 때 가장 세련된 UI 스타일이 바로 **SVG 원형 프로그레스 바(Circular Progress Bar)**입니다.

일반 사각형 프로그레스 바와 달리 원형 바는 SVG 대지 안에서 원주(Circumference) 길이 계산 수식과 stroke-dasharray, stroke-dashoffset 속성을 조합하여 정밀하고 곡선미 있는 퍼센티지 게이지를 완성합니다. 본 글에서는 원형 진행률의 기하학적 계산 공식과 CSS 애니메이션 제어법을 해설합니다.

---

1. SVG 원주(Circumference) 및 스트로크 오프셋 수식

반지름이 $r$인 원형 SVG 게이지의 둘레(원주) 길이 $C$와 주어진 진행 퍼센트 $P(%)$에 따른 스트로크 오프셋(Offset) 계산 공식은 다음과 같습니다:

[ C = 2 \times \pi \times r ]

[ \text{stroke-dashoffset} = C \times \left(1 - \frac{P}{100}\right) ]

구체적 수치 적용 예시:

• 원형 반지름 ($r$): 50px인 경우 원주 $C = 2 \times 3.14159 \times 50 \approx 314.16\text{px}$
• 목표 진행률 ($P$): 75%인 경우
  • $\text{stroke-dasharray} = 314.16$ (전체 원주 선분 길이 선언)
  • $\text{stroke-dashoffset} = 314.16 \times (1 - 0.75) = 78.54\text{px}$ (남은 25% 선분만큼을 가려 숨김 처리)

---

2. SVG 및 CSS 애니메이션 연동 구현 소스

75% 진행률의 둥근 원형 프로그레스 바를 생성하는 마크업 및 CSS 소스는 다음과 같습니다:

<div class="progress-circle-container">
  <svg class="progress-ring" width="120" height="120">
    <!-- 배경 원 트랙 -->
    <circle class="progress-ring-bg" stroke="#e2e8f0" stroke-width="8" fill="transparent" r="50" cx="60" cy="60" />
    <!-- 진행 원 트랙 -->
    <circle class="progress-ring-bar" stroke="#3b82f6" stroke-width="8" stroke-linecap="round" fill="transparent" r="50" cx="60" cy="60" />
  </svg>
  <span class="progress-text">75%</span>
</div>

.progress-ring {
  transform: rotate(-90deg); /* 12시 방향부터 채워지도록 시작점 회전 */
}

.progress-ring-bar {
  stroke-dasharray: 314.16;
  stroke-dashoffset: 314.16; /* 시작 시 0% */
  transition: stroke-dashoffset 1s ease-in-out;
  animation: fillProgress 1.2s ease-out forwards;
}

@keyframes fillProgress {
  to {
    stroke-dashoffset: 78.54; /* 75% 차오른 지점 */
  }
}

[!NOTE] 매번 파이($\pi$) 값과 반지름 수치를 계산기로 튕기며 stroke-dashoffset 픽셀을 일일이 산출할 필요 없이, CSS 원형 진행률 생성기 도구를 활용하면 원의 크기, 두께, 색상, 진행률(%)을 조절하면서 생성된 SVG 및 CSS 코드를 즉시 복사해 사용할 수 있습니다.

---

3. 실무 원형 프로그레스 바 디자인 팁

1. 시작점 12시 방향 회전(rotate(-90deg)): SVG <circle>의 기본 시작 위치는 3시(Right) 방향입니다. 원형 차트가 탑(12시) 방향부터 시계 방향으로 차오르게 연출하려면 SVG 요소에 transform: rotate(-90deg); 속성을 부여해야 친숙한 UX를 제공합니다.
2. stroke-linecap: round 설정: 진행 게이지의 양 끝단을 뭉툭하게 둥글려주는 stroke-linecap: round; 속성을 추가하면 인포그래픽 감성의 한층 세련된 차트 컴포넌트를 만들 수 있습니다.