HTML 코드
<div class="pb"><div class="label"><span>report.pdf 업로드 중</span><b>64%</b></div><div class="track"><div class="fill" style="width:64%"></div></div></div>
<div class="pb"><div class="label"><span>완료</span><b>100%</b></div><div class="track"><div class="fill done" style="width:100%"></div></div></div>
<style>
.pb{max-width:360px;margin-bottom:16px}
.label{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px;color:var(--muted)}
.label b{color:var(--fg)}
.track{height:8px;border-radius:4px;background:var(--surface);overflow:hidden}
.fill{height:100%;border-radius:4px;background:var(--accent);transition:width .3s}
.done{background:var(--success)}
</style>AI에게 이렇게 요청하세요
파일 업로드 중에 높이 8px 둥근 막대와 오른쪽 퍼센트 숫자로 진행률을 보여주고 완료되면 초록색이 되는 진행 바 넣어줘
<div class="pb"><div class="label"><span>report.pdf 업로드 중</span><b>64%</b></div><div class="track"><div class="fill" style="width:64%"></div></div></div>
<div class="pb"><div class="label"><span>완료</span><b>100%</b></div><div class="track"><div class="fill done" style="width:100%"></div></div></div>
<style>
.pb{max-width:360px;margin-bottom:16px}
.label{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px;color:var(--muted)}
.label b{color:var(--fg)}
.track{height:8px;border-radius:4px;background:var(--surface);overflow:hidden}
.fill{height:100%;border-radius:4px;background:var(--accent);transition:width .3s}
.done{background:var(--success)}
</style>언제 쓰나
업로드·다운로드, 설치, 설문 진행률처럼 전체 중 얼마나 했는지 계산할 수 있는 작업.
비슷한 것과 차이
- 스피너: 진행률을 모를 때
- 스테퍼: 단계 이름이 있는 진행 (1 약관 → 2 정보 → 3 완료)