Vue3 - 원형 프로그레스바

 

Vue3 사용하면서 사용하기 가장 쉬웠던 원형 프로그래스 라이브러리

언젠가 또 사용하게 될 일이 있을지도 모르니 기록하기 위해 글을 남겨봅니다.

 

 

공식 페이지

Vue3 Radial Progress Official Website >

 

 

사용 방법

 

Step 1. 설치

npm install --save vue3-radial-progress
// 또는
yarn add vue3-radial-progress

 

Step 2. script 내부에 import

import RadialProgress from 'vue3-radial-progress';

 

Step 3. import 했으니 components에 등록

components: {
    RadialProgress,
},

 

Step 4. 진행률과 전체값 정의

data() {
    return {
        completedSteps: 125, //circle Progress 진행률
        totalSteps: 500, //circle Progress 전체값
	}
}

 

Step 5. <template> 내부 원하는 위치에 컴포넌트를 붙여넣어 사용하기

<RadialProgress
    :diameter="100"
    :completed-steps="completedSteps"
    :total-steps="totalSteps"
    startColor="#3880ff"
    stopColor="#3880ff"
    innerStrokeColor="lightgray">
    <div class="circle_progress_info">
        <span>{{ (completedSteps / totalSteps) * 100 }}%</span>
        <span>사용중</span>
    </div>
</RadialProgress>

 

 

주요 Props

diameter : 크기를 지정
totalSteps : 최대값
completedSteps : 현재 진행률
startColor : 바 시작 색상
stopColor : 바 끝 색상
innerStrokeColor : 배경 색상
innerStrokeWidth: 바 너비

 

그 외의 값들은 공식 페이지를 참고하면 되고, 각각의 값들에 대한 변화는 데모 페이지 에서 확인 가능

(이 글을 쓰는 시점에선 데모 페이지 기능 작동안하는것도 많고 이상하니 대충 확인하는 용도로만...)