원형 그래프 애니메이션(숫자, 막대 변환) jQuery 플러그인

jquery-circle-progress

원형그래프 플러그인으로 원 안의 숫자와 원형 막대가 변환하는 애니메이션을 구현한다. 직관적으로 진행상황을 보여 줄 수 있는 디자인이라 다양하게 활용 할 수 있다. 여러 옵션을 제공하고 있어 디자인을 커스터마이징 할 수 있고, 반응형으로도 제작 할 수 있다.

 

사용법

<div id="circle"></div>

$('#circle').circleProgress({
    value: 0.75,
    size: 80,
    fill: {
      gradient: ["red", "orange"]
    }
});

 

다운로드 및 데모

jquery-circle-progress - jQuery Plugin to draw animated circular progress bars

 

옵션

value	필수 옵션. 0 ~ 1 사이의 숫자. (기본값 0)
size	원/캔버스의 크기(px). (기본값 100)
startAngle	초기 각도(0의 경우). (기본값 -Math.PI)
reverse	역방향 애니메이션. (기본값 false)
thickness	원형 막대 너비. 기본적으로 크기의 1/14로 자동 계산. (기본값 'auto')
lineCap	원형 막대 끝 모양. 'butt' - 직선마감 'round' - 둥근마감 'square' - 길이가 늘어짐. (기본값 butt)
fill	원형 막대 채우기. - "#ff1e41" - { color: "#ff1e41" } - { color: 'rgba(255, 255, 255, .3)' } - { gradient: ["red", "green", "blue"] } - { gradient: [["red", .2], ["green", .3], ["blue", .8]] } - { gradient: [ ... ], gradientAngle: Math.PI / 4 } - { gradient: [ ... ], gradientDirection: [x0, y0, x1, y1] } - { image: "https://ninnydesign.tistory.com/image.jpg" } - { image: imageInstance } - { color: "lime", image: "https://ninnydesign.tistory.com/image.jpg" } (기본값 { gradient: ["#3aeabb", "#fdd250"] })
emptyFill	그래프가 차지하지 않는 빈 원형 공간 채우기. 색상만 가능 (기본값 rgba(0, 0, 0, .1))
animation	jQuery 애니메이션 참조. false로도 설정가능. (기본값 { Duration: 1200, easing: "circleProgressEasing" })
animationStartValue	애니메이션 시작 값. 0 ~ 1사이의 숫자. 반전된 애니메이션은 1. (기본값 0)
insertMode	캔버스 삽입모드. (기본값 prepend)