IROUL
회원가입로그인
뒤로가기
패턴

stroke 하나로 그리는 방사형 진행률 링

그라데이션 stroke + 둥근 캡 + 카운트업의 재사용 도넛

SVGstroke-dasharray/offsetlinearGradientrequestAnimationFrameuseId
라이브 데모
새 탭에서 열기
데모 불러오는 중…

제작 과정

한 줄 요약

stroke-dashoffset 하나로 진행률을 그리고 CSS transition으로 채워지는 SVG 도넛.

놓치기 쉬운 것

둘레=2r, offset=둘레(1-값/100) / -90 회전으로 12시 시작 / 인스턴스마다 useId로 그라데이션 id 충돌 방지 / 중앙 숫자는 rAF 이징(ref로 현재값 추적).

소스 코드

· 데모 페이지에서 자동 추출
import type { Metadata } from "next";
import { RadialProgressDemo } from "./-components/RadialProgressDemo";

export const metadata: Metadata = {
  title: "방사형 진행률 링 (데모)",
  description:
    "stroke-dashoffset로 그리는 SVG 도넛 진행률. 그라데이션 stroke + 둥근 캡 + 중앙 카운트업. 색 프리셋 전환.",
  robots: { index: false, follow: false },
};

export default function Page() {
  return (
    <main className="flex min-h-[100dvh] items-center justify-center bg-gradient-to-br from-violet-50 via-white to-fuchsia-50/60">
      <RadialProgressDemo />
    </main>
  );
}
42조회수

댓글