원형 그래프 애니메이션(숫자, 막대 변환) jQuery 플러그인
2024. 5. 11.
목차
jquery-circle-progress
원형그래프 플러그인으로 원 안의 숫자와 원형 막대가 변환하는 애니메이션을 구현한다. 직관적으로 진행상황을 보여 줄 수 있는 디자인이라 다양하게 활용 할 수 있다. 여러 옵션을 제공하고 있어 디자인을 커스터마이징 할 수 있고, 반응형으로도 제작 할 수 있다.
check_circle Check
제이쿼리를 반드시 함께 사용해야 하는 제이쿼리 라이브러리.
사용법
라이브러리 추가하기
<head></head>태그 사이에 입력한다.
<head> <script src="jquery-circle-progress/dist/circle-progress.js"></script> </head>
파일 직접 다운로드하기 https://github.com/kottenator/jquery-circle-progress
html 작성하기
<body></body> 태그 사이에 입력한다
<body> <div id="circle"></div> </body>
스크립트 작성하기
<head></head>태그 사이 또는 <body></body>태그 사이에 입력하거나 외부 스크립트 파일에 입력한다
$('#circle').circleProgress({ value: 0.75, size: 80, fill: { gradient: ["red", "orange"] } });
옵션
| 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) |
참고사이트
jquery-circle-progress - jQuery Plugin to draw animated circular progress bars
no animation animation progress value progress custom angle, value update image fill, custom sizes Download version 1.2.2 bower install jquery-circle-progress npm install jquery-circle-progress
kottenator.github.io