[개요]
반시계 방향으로 도넛차트가 줄어드는 함수 구현하기
[방법]
conic-gradient라는 css 속성을 활용
setInterval( ) 함수로 일정시간 동안 타이머처럼 원의 영역이 줄어들도록 구현함
1. conic-gradient
https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient
conic-gradient() - CSS: Cascading Style Sheets | MDN
The conic-gradient() CSS function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center). Example conic gradients include pie charts and color wheels. The result of the conic-g
developer.mozilla.org
The conic-gradient() CSS function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center). Example conic gradients include pie charts and color wheels. The result of the conic-gradient() function is an object of the <grad...
developer.mozilla.org
'Frontend > React' 카테고리의 다른 글
| React Study - 4. 이벤트 핸들링 (0) | 2023.04.13 |
|---|---|
| React - 환경구축 및 설정 (0) | 2023.04.13 |
| React Study - 3. State (0) | 2023.04.10 |
| React Study - 2. 리액트 시작하기 (0) | 2023.04.09 |
| React Study - 1. Why React? (0) | 2023.04.07 |