진행 막대
Progress Bar
얼마나 진행됐는지 막대가 차오르며 보여 줘요.
💡 휴대폰 충전 표시처럼 얼마나 찼는지 보여 줘요.
👆 직접 눌러 보기
진짜로 동작해요. 눌러 보고 움직여 보세요.
1. 정보 입력2. 약관 동의3. 완료
CSSwidth: 33%
🤖 AI에게 이렇게 말해 보세요
회원가입을 3단계로 나누고 맨 위에 진행 막대(Progress Bar)를 넣어 줘. 단계가 넘어갈 때마다 막대가 부드럽게 차오르게 해 줘.
핵심은 ‘Progress Bar’라는 단어예요. 이 단어를 넣으면 AI가 훨씬 정확하게 알아들어요.
📌 알아 두면 좋아요
'1 → 2 → 3' 단계를 동그라미로 보여 주는 건 '스테퍼(Stepper)'라고 해요.
이럴 때 써요
- 파일 업로드, 설문 단계처럼 '얼마나 남았는지' 알려 줄 때
- 회원가입 1/3, 2/3 단계 표시
이렇게도 불러요: 진행률, 로딩바, 게이지, 퍼센트, 단계 표시, 스테퍼, stepper