진행 및 상태 표시기

1) 원칙

1. 즉각적인 응답 (약 100ms). '바쁜 '/골격/마이크로 애니메이션 → 를 누르면 모든 작업이 즉시 시각적으로 확인됩니다.
2. 정직과 예측 가능성. 백분율은 "영원한 99%" 가 아니라 실제 진보를 반영합니다. 평가가 불가능한 경우 불확실한 변형과 설명을 사용하십시오.
3. 활동 옆의 상황. 표시기는 먼 구석이 아닌 사용자가보고/행동하는 위치 (버튼, 카드, 블록) 입니다.
4. 성공 후 스텔스. 성공은 짧은 체크/페이드입니다. 오류-이해할 수있는 설명과 안전한 반복.
5. 기본 가용성. 'role = "progressbar"', 'aria-valuenow', 살아있는 지역, 대비 AA.

2) 지표의 종류 및 사용시기

선형 진행 상황 (결정/불확정). 로딩/가져 오기/내보내기, 명확한 범위의 단계.
순환 진행 (일반적으로 불확정). 컴팩트 한 장소에서 짧은 로컬 작업.
단계별 (단계별). 순차적 단계 ("4 단계 2"), KYC, 마스터 프로세스.
해골 (골격 플러그). 스피너 대신 컨텐츠 구조를 대체합니다. '선호 감소 모션' 을 가진 사용자의 경우 "쉬머" 를 피하십시오.
상태 배지 (성공/경고/위험/정보). 객체의 상태 (프로세스, 거부, 준비).
배너/상태 토스트. 글로벌 이벤트: 오프라인, 서버 오류, 대기열 동기화.
인라인 로더 (버튼/라인). 지역 운영: "저장"..., "보내기"...

3) 확실한 vs 불확실한 진보

Determine: 작업량이 알려져 있습니다 → 우리는 %/단계를 보여줍니다.
불확실한: 알 수없는 볼륨 → "진행중인 처리"... + 컨텍스트 ("일반적으로 최대 1-2 분").
상태 전환-불확실한 → 이동으로 시작하여 평가가 언제 나타나는지 확인할 수 있습니다.
ETA주의 깊게: 범위 ("~ 30-60 초") 를 표시하고 "약속" 을 피하십시오.

4) 배치 및 패턴

지역적으로 행동: 'aria-baddy' 버튼, 테이블 행의 스피너, 카드 진행.
블록/목록 위: 배치 작업 중 섹션 헤더 아래의 선형 막대.
글로벌: 최고의 미묘한 진보 (경로 변경), 시스템 배너.
끈적 끈적한 패널 (모바일): 하단 도크의 CTA에 대한 확인/진행 상황.

5) 가용성 (A11y)

html
<div role = "progressbar" aria-valuemin =" 0" aria-valuemax =" 100" aria-valuenow =" 42" aria-label = "Load Report "> </div>

불확실한: 'aria-valuenow' 없이 'role = "progressbar" 를 설정하고 설명 텍스트를' role = "상태" 에 추가하십시오.
라이브 지역: 정기적 인 업데이트를위한 'aria-live =' polite ', 중요한 업데이트를위한' 독단적 '.
동작에 의해 일시적으로 차단되는 컨테이너의 'aria-body = "참".
포커스는 "점프" 하지 않습니다. 스테이지를 변경할 때 포커스를 스테퍼 스텝 헤더로 이동하십시오.

6) 카피 라이팅 및 비주얼 시맨틱

간단하고 경우: "진행중인 로딩"..., "지불 처리"...
"다음 단계" 를 추가하십시오: "완료. 페이지를 자동으로 새로 고침합시다.
색상: 녹색-성공, 주황색-경고/주의, 빨간색-오류. 색상 = 의미의 유일한 매체: 아이콘/텍스트를 제공하십시오.

7) 낙관적 인 업데이트 및 풀백

낙관적: UI를 즉시 변경하고 (예: "즐겨 찾기" 마크) 서버로 조용히 확인합니다.
오류의 경우-소프트 롤백 + 설명 및 '재시도'.
중요한 작업 (요율/지불): 선택적으로 "부드러운 낙관적" (수정 "보내기 → 확인을 기다리는 중"...) 이지만 확인 전에 통화 조건을 변경하지 않습니다.

8) 대기열 및 배경 작업

대기열을 보여줍니다: 처리중인 'n' 작업, 진행중인 개별 카드.
가능한 경우 긴 작업을 위해 일시 중지/취소합니다.
배경 처리: "배경에서" 배지, 완료시 토스트, "작업 기록" 섹션.

9) 성능 및 타이밍

첫 번째 반응 λ100ms: 공극 대신 골격/인라인 바늘을 사용하십시오.
애니메이션: 120-180 ms (in), 80-140 ms (out), '변환/불투명도' 만.
긴 프로세스: 진행 상황을 10-15 회 이상/초로 업데이트합니다. 그룹 변경.

10) 스니펫

버튼에서 로컬 진행 상황

html
<button id="export" class="btn" aria-busy="false">Экспорт CSV</button>
<script>
const btn = document. getElementById('export');
btn. addEventListener('click', async () => {
btn. setAttribute('aria-busy','true'); btn. disabled = true;
try {
const r = await fetch('/api/export', { method:'POST' });
if(!r.ok) throw new Error();
//show toast "Export has begun. We will notify upon readiness"
} catch {
//toast with cause and Retry
} finally {
btn. disabled = false; btn. setAttribute('aria-busy','false');
}
});
</script>

선형 결정

html
<div class="progress">
<div class="bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div>
</div>
<style>
.progress{height:4px; background:var(--bg-muted); border-radius:999px; overflow:hidden}
.progress. bar{height:100%;width:0%;background:var(--accent); transition:width. 16s}
</style>
<script>
const bar = document. querySelector('.progress. bar');
let n=0; const t=setInterval(()=>{ n=Math. min(100, n+5); bar. style. width=n+'%'; bar. setAttribute('aria-valuenow',n); if(n===100) clearInterval(t); },160);
</script>

스테퍼

html
<nav aria-label = "Progress">
<ol class="steps">
<li class = "done "> <span> 1 </span> Data </li>
<li class = "current" aria-current = "step "> <span> 2 </span> Documents </li>
<li> <span> 3 </span> Confirmation </li>
</ol>
</nav>

11) 해골 올바른

끝없는 반짝임없이 (또는 '선호 감소 모션' 으로 비활성화) 미래 컨텐츠 (카드/라인) 형식을 사용하십시오.
시간 제한:> 300-500 ms를로드하면 골격이 정당화됩니다. 지연이 적을수록 "micro-fade" 로 충분합니다.

12) 상태 배지 (객체 상태)

예를 들어 초안, 프로세스, 보류 확인, 준비, 거부가 있습니다.

짧은 텍스트, 안정적인 아이콘/배경 색상, 대비 AA.
아이콘 'aria-hidden = "참" + 텍스트 레이블 (SR 용).
클릭-세부 정보를 공개하거나 "역사" 를 엽니 다.

13) iGaming의 세부 사항

• CTA → "보내기"...,> 3 초의 지연- "확인을 기다리는 중"... (불확실한).
• 성공- "베팅 허용" + 확인; 오류-정직한 설명 ("시장 기간 종료/비율 변경") 및 안전한 재시도.

• 단계별 디테마화: "방법 확인 → 보내기 → PSP 확인".
• 출력의 경우-프로세스 배지, 프로필의 상태 화면, ETA 범위; 완료를 추진하십시오.

• 등록 스테퍼 (단계), 수상 진행 (N/포인트), "참여" 상태 배지.
• 실시간 업데이트-' aria-live = "polite" 로 깔끔하고 깜박임이 없습니다.

• Stepper + 배지 "Under Review. "이미 받아 들여진 것 (틱) 과 남은 것을 보여주십시오.

14) 색상, 대비 및 텍스트

성공/정보/경고/위험-디자인 시스템에서 4 가지 안정적인 톤.

배지 배경 AA와 텍스트 대비

"공정 중" 및 "경고" 에 동일한 색상을 사용하지 마십시오.

15) 지표

TTFF (Time-to-First-Feedback): 첫 번째 시각적 응답을 클릭하십시오.
긴 작업에 대한 작업 완료 시간 및 드롭/중단률.
진행 상황에 대한 성공률 저하.
성공적으로 완료 한 낙관론자의% (및 롤백 비율).
보이는 시간 골격/스피너 (목표: 가능한 한 적게).

16) 반 패턴

사일런트 버튼 (바쁜/스피너 없음)> 100 ms.
설명이나 대안이없는 무한 스피너.
거짓 백분율/99% 매달린 슬라이더.
실패에 대한 내용을 재시도하고 다시 시도 할 수 없습니다.
텍스트/아이콘이 없는 색만 표시합니다.
진행 상황은 작업과 거리가 멀다 (사용자는 보이지 않음).

17) 디자인 시스템 토큰 (예)

json
{
"progress": {
"barHeight": 4,
"radius": 999,
"inMs": 160,
"outMs": 120,
"pollHz": 10
},
"status": {
"tones": { "success": "#", "info": "#", "warning": "#", "danger": "#" },
"badge": { "radius": 8, "px": "6 10", "icon": 14 }
},
"skeleton": {
"rowHeight": 16,
"gap": 8,
"reduceMotion": true
},
"a11y": {
"useAriaBusy": true,
"live": "polite",
"contrastAA": true
}
}

css
.badge{display:inline-flex; gap:6px; align-items:center; padding:6px 10px; border-radius:8px; font-size:.875rem}
.badge--success{background:var(--bg-success); color:var(--on-success)}
.skeleton{background:linear-gradient(90deg, var(--sk1), var(--sk2), var(--sk1)); border-radius:8px}
@media (prefers-reduced-motion: reduce){.skeleton{background:var(--sk1)} }

18) QA 체크리스트

반응과 정직

• TTFF λ100 ms; 현지 바쁜/해골이 있습니다.
• Determine-실제%; 불확실한-설명과 함께.

가용성

• 'role = "progressbar" '/' aria-valuenow' 올바른; 업데이트시 라이브 지역.
• 배지/텍스트 AA의 대조; 색깔이 의미의 유일한 소유자는 아닙니다.

행동

• 올바른 롤백 및 설명으로 낙관적입니다.
• 대기열이 표시됩니다. 취소/일시 정지가 있습니다 (해당되는 경우).
• 장면 근처의 진행은 CTA와 겹치지 않습니다.

성능

• 10-15 회 이상/초 업데이트; '변환/불투명도' 애니메이션.
• 스켈레톤은 '감소 운동' 으로 반짝이지 않습니다.

텍스트

• 기술 전문 용어가없는 짧음; 완료 후 "다음 단계".
• 보장되지 않는 한 정확한 시간의 "약속" 이 없습니다.

19) 설계 시스템의 문서

'ProgressBar', 'ProgressCircle', 'Stepper', 'StatusBadge', 'InlineLoader', 'Skeleton'.
상태 유형, 카피 라이팅 및 색상을 선택하는 규칙.
패턴: 낙관적, 대기열, 배경 처리, 오프라인 동기화.
Do/Do n 't gallery: "영구 스피너", 잘못된 비율, "음소거" CTA vs 좋은 TTFF.

간략한 요약

진행 상황과 상태를 나타내는 사람은시기 적절하고 정직하며 접근 가능한 피드백을 제공해야합니다. 행동과 함께 배치하고 명확한 진행과 불확실한 진행을 구별하고 a11y를 존중하며 애니메이션을 남용하지 마십시 iGaming에서는 베팅, 결제, 토너먼트 및 KYC에 특히 중요합니다. 차분하고 예측 가능한 진행 상황은 신뢰와 전환을 직접 증가시킵니다.