스크롤에 따라 차오르는 프로그레스바 UI 예제 (jQuery + CSS 애니메이션)
CSS 25.06.13스크롤 애니메이션이 적용된 Progress bar UI
스크롤 위치에 따라 값이 점점 차오르는 프로그레스바(progress bar)는 다양한 웹사이트에서 자주 쓰이는 인터랙션 UI입니다.
이번 예제는 HTML progress 태그, CSS, jQuery를 활용해 쉽게 구현할 수 있는 구조로, 포트폴리오, 소개페이지, 기업사이트 등에 바로 활용할 수 있습니다.
특히 서비스 강점이나 브랜드 가치를 시각적으로 표현할 때 많이 사용되며,
숫자 대신 '신뢰도', '실행력', '전문성'처럼 추상적인 키워드도 감각적으로 전달할 수 있다는 장점이 있습니다.
➰➰➰
예제 확인 (CodePen)
See the Pen Untitled by designkits (@designkits) on CodePen.
주요 특징⚡
✅ progress 태그 기반 구조로 접근성 유지
✅ 스크롤 위치 감지 후 자연스러운 퍼센트 증가 애니메이션
✅ jQuery .animate()와 step 옵션 활용
✅ 직관적인 수치 표현으로 신뢰도, 전문성, 실행력 등 강조 UI에 적합
코드 구성⚡
1 2 | <progress class="progress progress01" value="0" min="0" max="100"></progress> | cs |
✅ HTML : progress 태그를 이용해 기본 구조를 만들고
✅ CSS : border-radius, 배경 색상 등을 활용해 브랜드 컬러에 맞게 스타일링
✅ jQuery : 스크롤 위치가 특정 요소에 도달하면 value 값을 서서히 증가시키는 방식
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | // 프로그레스바 애니메이션 함수 정의 // selector: progress 태그 선택자, targetValue: 목표 값(최대 100) function animateProgress(selector, targetValue) { // jQuery 애니메이션 객체 생성({val:0}부터 시작해서 targetValue까지 애니메이트) $({ val: 0 }).animate({ val: targetValue }, { duration: 1000, // 애니메이션 지속 시간 1초 (1000ms) step: function (now) { // 애니메이션 진행 중 호출되는 함수, now는 현재 진행 중인 값 // progress 태그의 value 값을 현재 애니메이션 값(now)의 소수점 아래 버림으로 설정 $(selector).val(Math.floor(now)); } }); } $(function () { let animated = false; // 한 번만 애니메이션 실행하기 위한 플래그 변수 // 윈도우 스크롤 이벤트 등록 $(window).on("scroll", function () { let sctop = $(this).scrollTop(); // 현재 스크롤된 세로 위치값 let prosctop = $("#inc04 .bar_wrap").offset().top; // 프로그레스바가 있는 요소의 문서 내 세로 위치값 // 스크롤 위치 + 윈도우 높이가 프로그레스바 위치에 도달하면 if (!animated && sctop + $(window).height() > prosctop) { // 각 progress 바를 목표 값까지 애니메이션 실행 animateProgress("#inc04 .progress01", 90); animateProgress("#inc04 .progress02", 80); animateProgress("#inc04 .progress03", 70); animated = true; // 애니메이션 실행 완료 표시, 중복 실행 방지 } }); }); | cs |
스크롤 위치가 특정 요소에 도달하면 각 progress bar에 설정된 값(예: 90, 80, 70)까지 자연스럽게 value가 증가하는 방식입니다.
.animate({ value }, duration, step) 구조를 활용해 부드럽게 동작하며, 수치 표현도 직관적으로 가능합니다.
활용 예시⚡
✅ 서비스 소개 페이지에서 신뢰도, 만족도 표현
✅ 팀 소개 섹션에서 각 팀원의 전문 영역 강조
✅ 강의/교육 소개 페이지에서 이수율, 만족도 표시
✅ 실적 중심의 인포그래픽 UI 구성
✅ 기업/기관 페이지에서 내부 지표 시각화
➰➰➰
스크롤 트리거 애니메이션은 사용자에게 자연스러운 몰입감을 주는 UI 요소 중 하나입니다.
특히 progress bar처럼 수치와 퍼센트를 활용한 구성은 정보 전달력도 뛰어나고, 시각적으로도 직관적입니다.
디자인키트에서는 이런 인터랙션 예제를 중심으로, 실전 퍼블리싱에 바로 쓸 수 있는 코드들을 소개하고 있습니다.
앞으로도 다양한 스크롤 인터랙션 UI와 웹 퍼블리싱 코드들을 계속 정리해드릴게요!
