왜 쓰나요
긴 랜딩·매거진형 페이지에서 ‘앞으로 얼마나 남았는지’를 알려 이탈을 줄입니다.
Scroll Progress
스크롤 진행바
페이지를 얼마나 읽었는지 상단 바로 표시합니다. 긴 페이지에서 진행감을 줍니다.
직접 눌러보세요
아래 영역은 실제와 같은 방식으로 동작합니다.
진행률 0%
이 페이지를 아래로 스크롤해 보세요. 상단(또는 아래) 진행바가 채워집니다.
긴 콘텐츠 예시 구간입니다. 실제 사이트에서는 문서 전체 스크롤 기준으로 동작합니다.
랜딩 중간·후반부에서도 방문자가 ‘얼마나 남았는지’를 감각적으로 알 수 있습니다.
브랜드 컬러의 얇은 바로 두면 UI를 가리지 않으면서도 존재감이 있습니다.
스크롤을 끝까지 내려 100%를 확인해 보세요.
다시 위로 올리면 진행률이 줄어듭니다.
여기까지 읽으셨다면 진행바가 거의 찼을 것입니다.
문의·CTA 직전에 진행감을 주면 완주율이 좋아지는 경우가 많습니다.
이런 사이트에
- 긴 랜딩페이지
- 블로그·매거진
- 제안서형 원페이지
제작 팁
- 얇은 바로 두면 방해가 적습니다.
- 브랜드 포인트 컬러를 쓰면 통일감이 납니다.
고객 사이트에도 같은 기능을 넣을 수 있습니다
디자인·문구·연동까지 맞춰 드립니다.