ロード画面作りました










サンプルページ

上から 白い画面が出てきて 真ん中に Loading と書かれていて ロードが終わると下へ流れていきます
たったこれだけなのに意外と苦戦させられるところがありました

絶対座標指定したい

Loading のテキストは見えない時もずっと真ん中に固定して 白い背景が出てきたら見えるようにしたいです
なので 白背景の内側の要素にテキストを書いて 白背景の要素に overflow:hidden; をつけてます

これで テキストがあるところまで白背景の要素が広がると 子要素が表示されて良い感じになりそう と思いました

ですが 親要素が animation で可変サイズなのに 子要素の位置は親の親の要素の真ん中に固定しないといけないのに CSS だけだと親の親の要素の真ん中に固定するってできません

親要素の白背景の要素に position:absolute; をつけなければ 基準を親の親の要素にできますが そうすると overflow:hidden; でテキストが隠れなくなってしまいます
テキスト隠すには 両方 position:absolute; を設定するか 両方とも設定しないかですが 両方とも同じ position だと親の親の要素に対して中心配置ができません





しょうがないので 表示直前に JavaScript で高さから位置計算して ピクセルで指定してます
そのせいで ロード中にウィンドウサイズ変えるとズレます
デザイン部分なのに CSS じゃなくて JavaScript で処理してるのが気持ち悪いのです

座標の指定の基準を position を設定されたところだけじゃなくて 基準にする id を選べるようにするとか ページ全体の左上からのグローバルな座標で指定できるようにしてほしいです
position:fixed; は overflow:hidden; で消えないのでダメです

動作はChrome だけ

デザインで background-clip:text; を使ってるので Chrome のみ対応です
mozAnimationEnd でアニメーション終了イベントを受け取れないし最近の Firefox はなんか足りてないです