stroke-dasharray1 SVG 원형 프로그래스바 (svg circle progress bar) 안녕하세요~ 지난번에 만들었던 원형 스피너에 이어서 오늘은 프로그래스바를 만들어 보겠습니다. 원형바에 테두리가 처음부터 끝까지 조금씩 차오르는 애니메이션인데요~ 결화 화면부터 확인해 보겠습니다. 테두리 일부를 반복해서 rotate 하는 효과와 달리 시작점부터 끝까지 테두리가 차오르는 애니메이션 효과 입니다. 사용할 수 있는 다양한 방법이 있겠지만 svg를 이용하여 테두리를 그려주는 방법으로 오늘은 효과를 적용해 볼 계획입니다. 그럼 요소부터 만들어 볼까요? 1. svg 요소 그려주기 컨테이너 영역 내부에 svg 태그를 width 60, height 60 크기로 만들어 주었습니다. svg 내부에 투명한 테두리 원형 하나와 내부에 차오르는 효과를 줄 원형 두개를 그려 주겠습니다. width의 절반인 30을 .. 2023. 1. 4. 이전 1 다음