Skeletons in Bulma

Skeletons in Bulma (Bulma의 스켈레톤)

스켈레톤 로더(skeleton loader)는 콘텐츠가 로딩되는 동안 자리를 대신해서 보여 주는 로딩 상태예요. Bulma v1에는 2가지 스켈레톤 요소와, 대부분의 컴포넌트를 위한 스켈레톤 변형(variant)이 포함되어 있어요.

출처: 문서

본문

스켈레톤 로더는 인터페이스에서 콘텐츠의 자리를 대신하는 로딩 상태예요. Bulma v1에는 2가지 스켈레톤 요소와, 대부분의 Bulma 컴포넌트를 위한 스켈레톤 변형이 함께 제공돼요.

모든 스켈레톤 로더는 다음 CSS 변수를 공유해요.

:root {
  --bulma-skeleton-background: var(--bulma-border);
  --bulma-skeleton-radius: var(--bulma-radius-small);
  --bulma-skeleton-block-min-height: 4.5em;
  --bulma-skeleton-lines-gap: 0.75em;
  --bulma-skeleton-line-height: 0.75em;
}

Skeleton Block

스켈레톤 블록은 맥동(pulsating)하는 배경을 가진 단순한 블록 요소예요. 최소 높이 4.5em을 가져요.

Example

<div class="skeleton-block"></div>

이 블록 안에 텍스트를 넣으면 그 높이를 반응형으로 만들 수 있어요.

Example

<div class="skeleton-block">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
  Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
  ut fermentum massa justo sit amet risus. Donec sed odio dui.
  Nullam quis risus eget urna mollis ornare vel eu leo.
  Cum sociis natoque penatibus et magnis dis parturient montes,
  nascetur ridiculus mus. Nullam id dolor id
  nibh ultricies vehicula ut id elit.
</div>

Skeleton Lines

스켈레톤 라인은 텍스트 콘텐츠의 자리를 대신하는 여러 줄의 로딩 placeholder예요. skeleton-lines 컨테이너 안에 여러 개의 skeleton-line을 두어 글이 들어갈 자리를 표시해요.

Example

<div class="skeleton-lines">
  <div class="skeleton-line"></div>
  <div class="skeleton-line"></div>
  <div class="skeleton-line is-half"></div>
</div>

개별 스켈레톤 라인의 너비를 조절하고 싶다면 is-one-quarter, is-half, is-three-quarters 같은 크기 수정자를 사용할 수 있어요.

컴포넌트 스켈레톤

Bulma는 대부분의 컴포넌트에 스켈레톤 변형을 제공해요. 버튼(skeleton-button), 카드(skeleton-card), 입력(skeleton-input), 테이블(skeleton-table), 탭(skeleton-tabs) 등 잘 알려진 컴포넌트를 로딩 상태로 표시할 수 있어요. 이 변형들은 공통의 스켈레톤 CSS 변수를 공유하므로, 위에서 본 변수들로 흔히 일괄 스타일링할 수 있어요.

더 알아보기 (Learn more)

• CSS 변수
• 테마