LoadingSteps
원본: projects/skill-lens/design/components/LoadingSteps/README.md
상태: In Progress, 접근성 ✓, 다크 ✓, 코드 ✗
로딩: 빙글이 대신 렌즈 + 단계 셋
1초 넘게 걸리는 일을 하는 동안 무엇을 하고 있는지 단계 셋으로 보여 줍니다. 원본은 8판 .load.
쓰는 곳
회사 찾기, 직무 읽기, 스킬셋 만들기, 초대 전송.
구성(화면이 넘겨줄 것)
렌즈 판(sl-loading__lens 128 둥글기 36 안 MARK('loop')), 단계 셋의 이름과 상태, 점 셋, 안내 한 줄.
규칙
- 단계(
sl-loading__step): 14, 동그라미 20. 끝난 단계는 보라 원 + 흰 체크(8판의 라임은 결정 44로 보라), 진행 중은 보라 테 원 + 번호, 대기는 빈 원과 회색 글. - 점 셋(
sl-loading__dots)은 1초마다 차례로 뛰고, "창을 닫아도 계속 진행돼요"를 항상 둡니다. - 렌지가 처음 나오는 자리면 부제에 "렌지는 SkillLens의 AI예요" 한 줄.
- 폰은 렌즈 판 104.
접근성
role="status",aria-live="polite". 움직임 줄이기에서는 렌즈와 점이 멈춥니다.
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.