HTML 게이지 — progress · meter 완전 정리

 

 

Web Development · HTML Gauge

HTML 게이지 —
progress · meter 완전 정리

진행률 · 로딩 바 · 점수 표시 — 한 줄로 만드는 시각적 게이지

시작 오늘 분석할 코드

로딩 바, 타이머, 다운로드 진행 — 사용자에게 현재 진행 상황을 시각적으로 보여줄 때 쓰는 <progress> 태그.

<ul> <li> <label>10초 남음</label> <progress value="50" max="60"></progress> </li> <li> <label>진행률 30%</label> <progress value="30" max="100"></progress> </li> </ul>

실제 출력 결과

• 10초 남음
• 진행률 30%
• 다운로드 75%
• 로딩 중 (값 미정)

용어 용어 정리

progress진행률 게이지 (작업의 완료도)

meter측정값 게이지 (절대값)

value현재 값

max최대값 (기본 1)

low / highmeter의 낮음/높음 구간

optimummeter의 이상적인 값

---

1 <progress> — 진행률 게이지

<progress>는 "현재 어느 정도 진행됐는가"를 보여준다. 다운로드, 업로드, 게임 로딩, 폼 단계 등 작업 완료도 표현에 사용.

value / max = 진행률 <progress value="50" max="60"> → 50/60 = 약 83% <progress value="30" max="100"> → 30/100 = 30% <progress></progress> → 값 미정 → 무한 로딩 애니메이션

※ value를 비우면 무한 로딩 바 애니메이션이 자동으로 표시된다. "처리 중인데 얼마나 걸릴지 모름"을 표현할 때.

---

2 <progress> vs <meter> — 비슷하지만 다른 둘

둘 다 가로 바를 그리지만, 의미와 사용 시점이 다르다.

<progress>

진행률 (process)
시간이 지나면 변함
0% → 100%로 증가
다운로드, 업로드, 로딩

<meter>

측정값 (measurement)
고정된 현재 상태
예: 디스크 사용량, 점수
증가하지 않음

<!-- progress: 시간 지나면 차오름 --> <progress value="50" max="100">다운로드 50%</progress> <!-- meter: 현재 측정값 --> <meter value="75" max="100">디스크 75% 사용 중</meter> <meter value="3" min="0" max="5">별점 3/5</meter>

---

3 meter의 고급 — low/high/optimum

meter는 "좋음·나쁨" 색상 구간을 자동으로 표현할 수 있다.

<meter value="75" min="0" max="100" low="33" high="66" optimum="50"> </meter>

속성	역할
min / max	전체 범위
low	낮음 구간 경계 (이하 = 낮음)
high	높음 구간 경계 (이상 = 높음)
optimum	이상적인 값 — 이 근처면 초록

※ value가 optimum 가까우면 초록, 멀면 노랑·빨강으로 자동 표시. CPU 사용률·재고 부족 알림 등에 적합.

반응형

---

4 JS로 동적 업데이트

다운로드 진행 등 실시간 변화는 JS로 value를 변경한다.

const bar = document.querySelector("progress"); let count = 0; const timer = setInterval(() => { count++; bar.value = count; if (count >= 100) clearInterval(timer); }, 100); // 또는 fetch 다운로드 진행 추적 fetch("/big-file").then(res => { const reader = res.body.getReader(); // 청크마다 progress 갱신 ... });

---

5 CSS로 progress 디자인

기본 progress 모양이 마음에 안 들면 CSS로 어느 정도 꾸밀 수 있다. 다만 브라우저별로 가상 요소 이름이 다르다.

/* 컨테이너 */ progress { width: 300px; height: 20px; border: none; border-radius: 10px; } /* WebKit (Chrome, Safari) */ progress::-webkit-progress-bar { background: #eee; border-radius: 10px; } progress::-webkit-progress-value { background: #2d6a4f; border-radius: 10px; } /* Firefox */ progress::-moz-progress-bar { background: #2d6a4f; }

※ 브라우저별 차이 때문에 정밀한 디자인이 필요하면 div와 CSS만으로 직접 만드는 게 더 일관적.

---

6 자주 하는 실수

실수	증상	해결
max 누락	기본 1 (소수점 처리)	명시적으로 max 지정
value > max	꽉 찬 상태로 표시	value는 max 이하로
progress로 점수 표시	의미 부정확	고정값은 meter
닫기 태그 누락	일부 브라우저 깨짐	<progress></progress>
접근성 텍스트 X	스크린 리더 부정확	label과 함께

---

핵심 한 줄 요약

<progress>진행률 — 시간 지나면 차오름

<meter>측정값 — 현재 상태 표시

value / max현재값 / 최대값

value 생략무한 로딩 애니메이션

low/high/optimummeter의 색상 구간

JS 업데이트실시간 변화는 value 직접 변경

디자인 한계자유도 원하면 div 직접 작성

Tags

#progress #meter #value #max #HTML #게이지 #진행률 #프로그레스바 #로딩 #다운로드 #타이머 #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

progress, meter, value, max, HTML, 게이지, 진행률, 프로그레스바, 로딩, 다운로드, 타이머, 웹개발, 티스토리