Components / New

Progress & Skeleton

Three ways to say 'we're on it'. Pick the one that matches what you know about the wait.'처리하고 있어요'를 전하는 세 가지 방법입니다. 기다림에 대해 알고 있는 정도에 맞춰 고릅니다.

Determinate progress진행률 표시

When you know how much is left, show it.남은 양을 알 때는 보여 줍니다.

Live previewDYNGLE UI

Uploading 3 photos사진 3장 올리는 중

Variants종류

Progress bar진행 막대Uploads, multi-step tasks. Known duration.업로드, 여러 단계 작업. 시간을 알 때.

Spinner & indeterminate스피너와 불확정 막대Short, unknown waits on a single action.단일 동작의 짧고 예측 어려운 기다림.

Skeleton스켈레톤Content whose layout you already know.레이아웃을 이미 알고 있는 콘텐츠.

Skeleton스켈레톤

Mirror the real layout so nothing jumps when content arrives.실제 레이아웃을 그대로 따라 콘텐츠가 도착해도 화면이 흔들리지 않게 합니다.

Static preview정적 미리보기DYNGLE UI

Sunday trail walk일요일 트레일 산책0.4 mi / 18 going650m / 18명 참여

Usage사용 가이드

Match the real layout실제 레이아웃과 맞추기

Do권장

Use the same sizes and spacing as the loaded content: avatar circle, title line, meta line.로드된 콘텐츠와 같은 크기와 간격을 씁니다: 아바타 원, 제목 줄, 메타 줄.

Don't지양

Don't show a generic gray block that collapses or grows when content appears.콘텐츠가 나타날 때 줄어들거나 커지는 일반적인 회색 덩어리를 보여 주지 않습니다.

One indicator per region영역마다 표시는 하나

Do권장

Show one loading state for the region that's changing. Keep the rest of the page usable.바뀌는 영역에만 로딩 상태를 하나 보여 줍니다. 나머지 화면은 계속 쓸 수 있게 둡니다.

Don't지양

Don't scatter spinners across every card, or block the whole page for one list.모든 카드에 스피너를 흩뿌리거나, 목록 하나 때문에 화면 전체를 막지 않습니다.

Markup

HTML

<div class="dy-progress" role="progressbar" aria-label="Upload progress"
     aria-valuemin="0" aria-valuemax="100" aria-valuenow="62">
  <span style="--value: 62%"></span>
</div>

<span class="dy-spinner" role="status" aria-label="Loading"></span>

<div aria-busy="true">
  <span class="dy-skeleton circle" style="width:40px;height:40px"></span>
  <span class="dy-skeleton" style="width:60%"></span>
</div><div class="dy-progress" role="progressbar" aria-label="업로드 진행도"
     aria-valuemin="0" aria-valuemax="100" aria-valuenow="62">
  <span style="--value: 62%"></span>
</div>

<span class="dy-spinner" role="status" aria-label="불러오는 중"></span>

<div aria-busy="true">
  <span class="dy-skeleton circle" style="width:40px;height:40px"></span>
  <span class="dy-skeleton" style="width:60%"></span>
</div>

Classes클래스

Class클래스	Purpose용도
.dy-progress	Track; set --value on the inner span트랙. 안쪽 span에 --value 지정
.dy-progress.lime	Lime fill for completion moments완료 순간을 위한 라임 채움
.dy-progress.indeterminate	Sliding bar for unknown duration시간을 모를 때 움직이는 막대
.dy-spinner	20px ring in the action color액션 색의 20px 링
.dy-skeleton(.circle/.block)	Shimmering placeholder반짝이는 자리 표시

#Determinate progress진행률 표시

#Variants종류

#Skeleton스켈레톤

#Usage사용 가이드

#Match the real layout실제 레이아웃과 맞추기

#One indicator per region영역마다 표시는 하나

#Markup

#Classes클래스