ローディング · Loading / Skeleton · Blanc Nail

◈ Blanc Nail

検索…

カタログ 統計

使い方 →

CATALOG › Utility › Loading / Skeleton

ローディング

ローディング、スケルトン、プレースホルダ表示の型。

4

Patterns

Utility

Group

isValid=0

Verified

CSS

Animation

01

Loading — Indeterminate Progress Bar

loading-progress-bar

Copy
Link

⏳

読み込み中…

大きなファイルを処理しています ・ あと少しお待ちください

  • パターン名: Loading — Indeterminate Progress Bar
  • 概要: Indeterminate progress bar with sliding gradient for unknown-duration tasks.
  • 使用目的: Loading / Skeleton領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 640px、主要ブロック group, paragraph, heading, paragraph, group, group
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Loading / Skeletonをミニマルに見せる余白重視版 / Loading / Skeletonをリッチに見せるカバー/カード強調版 / Loading / Skeletonをコーポレート向けに整える情報密度高め版 / Loading / Skeletonをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/loading-progress-bar"} /-->

CSS:
.section-loading-progress-bar { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-loading-progress-bar').forEach((el) => el.dataset.ready = 'true');

02

Loading — Skeleton Card

loading-skeleton-card

Copy
Link

読み込み中… (CSS class .tf-skeleton で shimmer 演出)

  • パターン名: Loading — Skeleton Card
  • 概要: Skeleton placeholder card with shimmering image and three text bars.
  • 使用目的: Loading / Skeleton領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 縦積みの情報整理構造、幅配分 1px、推奨コンテンツ幅 640px、主要ブロック group, group, group, group, group, group, paragraph
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Loading / Skeletonをリッチに見せるカバー/カード強調版 / Loading / Skeletonをコーポレート向けに整える情報密度高め版 / Loading / Skeletonをカジュアルに見せるアイコン/ラベル強調版 / Loading / Skeletonをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/loading-skeleton-card"} /-->

CSS:
.section-loading-skeleton-card { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-loading-skeleton-card').forEach((el) => el.dataset.ready = 'true');

03

Loading — Skeleton Text Paragraph

loading-skeleton-text

Copy
Link
  • パターン名: Loading — Skeleton Text Paragraph
  • 概要: Skeleton placeholder for loading text paragraph (title bar + 3 progressively-shorter lines).
  • 使用目的: Loading / Skeleton領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 縦積みの情報整理構造、幅配分 1px、推奨コンテンツ幅 640px、主要ブロック group, group, group, group, group, group
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Loading / Skeletonをミニマルに見せる余白重視版 / Loading / Skeletonをリッチに見せるカバー/カード強調版 / Loading / Skeletonをコーポレート向けに整える情報密度高め版 / Loading / Skeletonをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/loading-skeleton-text"} /-->

CSS:
.section-loading-skeleton-text { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-loading-skeleton-text').forEach((el) => el.dataset.ready = 'true');

04

Loading — 3 Spinner Variants

loading-spinner-set

Copy
Link

スピナー ・ バリエーション

回転リング

パルス

パルス (ゴールド)

  • パターン名: Loading — 3 Spinner Variants
  • 概要: Three loading indicators: ring / pulse / gold pulse.
  • 使用目的: Loading / Skeleton領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 4px、推奨コンテンツ幅 720px、主要ブロック group, heading, columns, column, group, paragraph, column, group
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Loading / Skeletonをリッチに見せるカバー/カード強調版 / Loading / Skeletonをコーポレート向けに整える情報密度高め版 / Loading / Skeletonをカジュアルに見せるアイコン/ラベル強調版 / Loading / Skeletonをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/loading-spinner-set"} /-->

CSS:
.section-loading-spinner-set { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-loading-spinner-set').forEach((el) => el.dataset.ready = 'true');