Skip to content

v0.1.6

@green-spot green-spot tagged this 25 Jul 06:15
管理画面の「読み込み中」表示に使える部品が skeleton しか無く、ページ全体や
モーダル内など出来上がりの形が分からない領域に当てるものが無かった。
Stage 側で各ページが手書きの中央寄せテキスト(73 箇所)で代用していたため、
体裁を部品に寄せられるようにする。

- spinner.css: .c-spinner(small / large / current)と、領域中央に置く
  .c-loading-state(compact)。余白は .c-empty-state と揃え、読み込み →
  空 / データ表示の切替で高さが飛ばないようにする
- current はトラックを透明にして currentColor に寄せる(ボタン内で背景色を
  問わず成立させるため。不透明色の混色をボタンごとに用意しない)
- prefers-reduced-motion では回転を止めず速度だけ落とす(止まると読み込み中に
  見えないため。base/motion.css の一律短縮を打ち消す)
- skeleton.css: 一覧・テーブル向けに行 × 列の .c-skeleton-rows を追加(列数は
  --cols)。行の形が分かっている領域はこちらの方がレイアウトのずれが小さい
- docs に Skeleton との使い分け表を追記、デモページとドキュメント索引も更新

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Assets 2
Loading