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". 움직임 줄이기에서는 렌즈와 점이 멈춥니다.
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Feedback" height=340 subtitle="로딩: 빙글이 대신 렌즈 + 단계 셋" -->
<style>body{margin:0;padding:var(--space-4);background:var(--gradient-canvas)}</style>
<div class="sl sl-glass sl-loading" style="max-width:360px" role="status" aria-live="polite">
<span class="sl-lens sl-lens--sm" aria-hidden="true"><svg viewBox="0 0 240 240" role="img" aria-label="SkillLens"><defs><linearGradient id="mkd3-gb" x1="0.7" y1="0" x2="0.25" y2="1"><stop offset="0" stop-color="#eceeff"/><stop offset="0.22" stop-color="#9a9cf8"/><stop offset="0.5" stop-color="#5450e9"/><stop offset="0.8" stop-color="#4f46e5"/><stop offset="1" stop-color="#4a44d8"/></linearGradient><linearGradient id="mkd3-gbe" x1="0" y1="0.2" x2="1" y2="0.8"><stop offset="0" stop-color="#f3f4ff"/><stop offset="0.35" stop-color="#cdd2ff" stop-opacity="0.9"/><stop offset="1" stop-color="#8f93f7" stop-opacity="0.3"/></linearGradient><radialGradient id="mkd3-gbg" cx="0.72" cy="0.18" r="0.75"><stop offset="0" stop-color="#fff" stop-opacity="0.55"/><stop offset="0.45" stop-color="#fff" stop-opacity="0.12"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient><radialGradient id="mkd3-gbs" cx="0.35" cy="0.85" r="0.7"><stop offset="0" stop-color="#2e2bb8" stop-opacity="0.35"/><stop offset="1" stop-color="#2e2bb8" stop-opacity="0"/></radialGradient><linearGradient id="mkd3-gf" x1="0.1" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#fff" stop-opacity="0.5"/><stop offset="0.5" stop-color="#fff" stop-opacity="0.9"/><stop offset="0.78" stop-color="#f3ffe2"/><stop offset="0.92" stop-color="#d3ff9a"/><stop offset="1" stop-color="#b6ff75"/></linearGradient><linearGradient id="mkd3-go" x1="0.15" y1="0" x2="0.85" y2="1"><stop offset="0" stop-color="#b3ecff"/><stop offset="0.28" stop-color="#5fb0ff"/><stop offset="0.6" stop-color="#3f4fe3"/><stop offset="0.85" stop-color="#5f74f0"/><stop offset="1" stop-color="#8d9cf5"/></linearGradient><linearGradient id="mkd3-ge" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#fff"/><stop offset="0.6" stop-color="#fff" stop-opacity="0.85"/><stop offset="1" stop-color="#eaffd4" stop-opacity="0.4"/></linearGradient><clipPath id="mkd3-cb"><ellipse cx="-24" cy="0" rx="84" ry="98" ><animate attributeName="cx" values="-70;-24;-24;-70" keyTimes="0;0.4;0.75;1" dur="2.4s" repeatCount="indefinite" calcMode="spline" keySplines="0.2 0.8 0.2 1;0 0 1 1;0.4 0 1 1"/></ellipse></clipPath><clipPath id="mkd3-cbi"><ellipse cx="-21.5" cy="-1" rx="82" ry="96.5" ><animate attributeName="cx" values="-67.5;-21.5;-21.5;-67.5" keyTimes="0;0.4;0.75;1" dur="2.4s" repeatCount="indefinite" calcMode="spline" keySplines="0.2 0.8 0.2 1;0 0 1 1;0.4 0 1 1"/></ellipse></clipPath><clipPath id="mkd3-cf"><ellipse cx="24" cy="0" rx="84" ry="98" ><animate attributeName="cx" values="70;24;24;70" keyTimes="0;0.4;0.75;1" dur="2.4s" repeatCount="indefinite" calcMode="spline" keySplines="0.2 0.8 0.2 1;0 0 1 1;0.4 0 1 1"/></ellipse></clipPath></defs><g transform="translate(120 120) rotate(28)"><g clip-path="url(#mkd3-cb)"><ellipse cx="-24" cy="0" rx="84" ry="98" fill="url(#mkd3-gbe)"><animate attributeName="cx" values="-70;-24;-24;-70" keyTimes="0;0.4;0.75;1" dur="2.4s" repeatCount="indefinite" calcMode="spline" keySplines="0.2 0.8 0.2 1;0 0 1 1;0.4 0 1 1"/></ellipse><g clip-path="url(#mkd3-cbi)"><ellipse cx="-21.5" cy="-1" rx="82" ry="96.5" fill="url(#mkd3-gb)"><animate attributeName="cx" values="-67.5;-21.5;-21.5;-67.5" keyTimes="0;0.4;0.75;1" dur="2.4s" repeatCount="indefinite" calcMode="spline" keySplines="0.2 0.8 0.2 1;0 0 1 1;0.4 0 1 1"/></ellipse><ellipse cx="-21.5" cy="-1" rx="82" ry="96.5" fill="url(#mkd3-gbs)"><animate attributeName="cx" values="-67.5;-21.5;-21.5;-67.5" keyTimes="0;0.4;0.75;1" dur="2.4s" repeatCount="indefinite" calcMode="spline" keySplines="0.2 0.8 0.2 1;0 0 1 1;0.4 0 1 1"/></ellipse><ellipse cx="-21.5" cy="-1" rx="82" ry="96.5" fill="url(#mkd3-gbg)"><animate attributeName="cx" values="-67.5;-21.5;-21.5;-67.5" keyTimes="0;0.4;0.75;1" dur="2.4s" repeatCount="indefinite" calcMode="spline" keySplines="0.2 0.8 0.2 1;0 0 1 1;0.4 0 1 1"/></ellipse></g></g><ellipse cx="24" cy="0" rx="84" ry="98" fill="url(#mkd3-gf)"><animate attributeName="cx" values="70;24;24;70" keyTimes="0;0.4;0.75;1" dur="2.4s" repeatCount="indefinite" calcMode="spline" keySplines="0.2 0.8 0.2 1;0 0 1 1;0.4 0 1 1"/></ellipse><ellipse cx="24" cy="0" rx="84" ry="98" fill="url(#mkd3-go)" clip-path="url(#mkd3-cb)" opacity="0.93"><animate attributeName="cx" values="70;24;24;70" keyTimes="0;0.4;0.75;1" dur="2.4s" repeatCount="indefinite" calcMode="spline" keySplines="0.2 0.8 0.2 1;0 0 1 1;0.4 0 1 1"/></ellipse><g clip-path="url(#mkd3-cf)"><ellipse cx="24" cy="0" rx="84" ry="98" fill="url(#mkd3-ge)"><animate attributeName="cx" values="70;24;24;70" keyTimes="0;0.4;0.75;1" dur="2.4s" repeatCount="indefinite" calcMode="spline" keySplines="0.2 0.8 0.2 1;0 0 1 1;0.4 0 1 1"/></ellipse><ellipse cx="29" cy="-2" rx="82" ry="96" fill="url(#mkd3-gf)"><animate attributeName="cx" values="75;29;29;75" keyTimes="0;0.4;0.75;1" dur="2.4s" repeatCount="indefinite" calcMode="spline" keySplines="0.2 0.8 0.2 1;0 0 1 1;0.4 0 1 1"/></ellipse><ellipse cx="29" cy="-2" rx="82" ry="96" fill="url(#mkd3-go)" clip-path="url(#mkd3-cb)" opacity="0.93"><animate attributeName="cx" values="75;29;29;75" keyTimes="0;0.4;0.75;1" dur="2.4s" repeatCount="indefinite" calcMode="spline" keySplines="0.2 0.8 0.2 1;0 0 1 1;0.4 0 1 1"/></ellipse></g><ellipse cx="-24" cy="0" rx="83.5" ry="97.5" fill="none" stroke="#fff" stroke-width="1" opacity="0.6"><animate attributeName="cx" values="-70;-24;-24;-70" keyTimes="0;0.4;0.75;1" dur="2.4s" repeatCount="indefinite" calcMode="spline" keySplines="0.2 0.8 0.2 1;0 0 1 1;0.4 0 1 1"/></ellipse><ellipse cx="24" cy="0" rx="83.5" ry="97.5" fill="none" stroke="#fff" stroke-width="1" opacity="0.8"><animate attributeName="cx" values="70;24;24;70" keyTimes="0;0.4;0.75;1" dur="2.4s" repeatCount="indefinite" calcMode="spline" keySplines="0.2 0.8 0.2 1;0 0 1 1;0.4 0 1 1"/></ellipse></g></svg></span>
<div class="sl-loading__title">스킬셋 초안을 만들고 있어요</div>
<div class="sl-loading__steps sl-stagger">
<div class="sl-loading__step"><span class="sl-done"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>직무 46개 읽기</div>
<div class="sl-loading__step"><span class="sl-done"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>스킬 126개 뽑기</div>
<div class="sl-loading__step is-pending"><i class="sl-steps__dot is-current"></i>레벨 맞추기</div>
</div>
<div class="sl-loading__note">창을 닫아도 계속 진행돼요.</div>
</div>
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.