JavaScript의 setInterval 기능과 CSS의 Linear-gradient를 이용해 0%~100%까지 글자가 변하며 div 태그의 백그라운드 색깔이 퍼센트가 차오르며 색도 같이 변경되는 샘플 코드를 하나 만들어 봤습니다.
See the Pen Untitled by zzarungna (@zzarungna) on CodePen.
이번 예제 소스 코드를 작성하며 개인적으로 재밌었던 부분 중 하나는 백틱을(` 키보드 숫자 1 왼쪽에 있는 문자) 사용해 글자를 쪼개고 붙이지 않아도 데이터 표현이 가능한 부분이었던 것 같습니다.
gageBox.style.background = `linear-gradient(to top, lightblue ${percentage}%, transparent ${percentage}%)`; // 배경색을 퍼센트에 맞게 변경
소스 주요 기능으로 JavaScript에서 제공하는 setInterval 기능을 사용해 0.1초마다 updategage 함수를 지속적으로 호출하며 CSS의 linear-gradient 속성값과 HTML div 태그의 글자를 실시간으로 변경하는 부분이었던 것 같습니다.
intervalId = setInterval(updategage, 100); // 0.1초마다 updategage 함수를 호출 function updategage() { if (percentage <= 100) { gageBox.textContent = percentage + '%'; // 박스 안에 percentage 값을 표시 gageBox.style.background = `linear-gradient(to top, lightblue ${percentage}%, transparent ${percentage}%)`; // 배경색을 퍼센트에 맞게 변경 percentage++; // percentage 값을 1 증가 } else { clearInterval(intervalId); // percentage가 100을 넘으면 interval을 멈춤 } }
재미삼아 0%~100% 숫자가 올라가며 게이지가 차오르는 느낌을 만들어 보고 싶었습니다. 혹시라도 필요한 소스가 있다면 복사해서 활용 하시면 좋을 것 같습니다.