우측 상단의 원형 프로그레스 바와 좌측의 세로형 프로그레스 바가 스크롤 진행도를 다양한 방식으로 표시합니다.
0%
0%
인터랙티브 애니메이션
스크롤 프로그레스 바
(Scroll Progress Bar)
스크롤 프로그레스 바는 사용자가 페이지를 얼마나 스크롤했는지 시각적으로 보여주는 인터랙티브 요소입니다.
긴 콘텐츠에서 현재 위치를 파악하고 읽기 진행도를 추적할 수 있어 사용자 경험을 크게 향상시킵니다.
아래 컨트롤러로 프로그레스 바의 높이, 색상, 애니메이션 속도를 조절하며 다양한 스크롤 프로그레스 바를 직접 경험해보세요.
px: 프로그레스 바의 두께를 조절합니다. 숫자가 클수록 더 두꺼워집니다.
s(초): 프로그레스 바가 변화하는 애니메이션 속도를 조절합니다. 숫자가 클수록 더 천천히 변화합니다.
프로그레스 바의 색상 테마를 변경합니다.
화면을 스크롤하여 프로그레스 바 효과를 확인해보세요
▼기본 스크롤 프로그레스 바
페이지 상단과 하단에 고정된 프로그레스 바가 스크롤 진행도를 실시간으로 표시합니다.
대형 텍스트와 프로그레스 바
스크롤하며 진행도를 확인하세요
인라인 프로그레스 바
콘텐츠 내부 프로그레스 바
이 프로그레스 바는 콘텐츠 내부에 포함되어 있습니다.
이미지 + 텍스트와 프로그레스 바
호버 효과가 있는 프로그레스 바 (마우스를 올려보세요)
인터랙티브 프로그레스 바
마우스를 올리면 프로그레스 바가 확대되고 글로우 효과가 나타납니다.
대형 이미지 오버레이와 프로그레스 바
카드 스타일과 프로그레스 바
우측의 텍스트 프로그레스 바가 정확한 퍼센티지를 표시합니다
다중 라인 텍스트와 프로그레스 바
여러 종류의 프로그레스 바가 동시에 작동합니다.
상단 고정 바는 전체 페이지 진행도를 표시하고,
하단 고정 바는 다른 색상으로 시각적 다양성을 제공합니다.
원형과 세로형 바는 공간 효율적인 대안을 제시합니다.