Loader

Loader는 데이터가 불러오는 중임을 사용자에게 알려주는 요소예요. 콘텐츠가 아직 준비되지 않았을 때 그 자리를 시각적으로 채워주는 역할을 해요.

출처: Loader

본문

Types

Loader

기본 로더예요

Text Loader

로더는 텍스트를 포함할 수 있어요

Loading

Loading

States

Indeterminate

로더는 작업이 얼마나 걸릴지 확실하지 않다는 것을 보여줄 수 있어요

Preparing Files

Active

로더는 활성 상태이거나 보이는 상태일 수 있어요

Disabled

로더는 비활성화되거나 숨겨진 상태일 수 있어요

Variations

Inline

로더는 콘텐츠와 함께 인라인으로 나타날 수 있어요

Inline Center

로더는 콘텐츠와 함께 인라인 중앙에 나타날 수 있어요

Speed

로더는 느리게, 보통, 빠르게 나타날 수 있어요

Colors

로더는 다양한 색을 가질 수 있어요

Size

로더는 다양한 크기를 가질 수 있어요

Inverted

로더는 색상을 반전시킬 수 있어요.

Styles

로더는 double 또는 elastic 애니메이션 스타일로도 나타날 수 있어요. 어떤 색이나 속도와도 조합할 수 있어요.

더 알아보기

Loader는 로딩 상태를 표현할 때 자주 쓰여요. 실제 데이터 로딩 흐름과 연결하려면 Dimmer나 Segment의 로딩 상태와 함께 조합해서 사용해보세요.