Loading Animation

説明

やってること

wikidotページには、"#extra-div-1"というdivブロックが自動的に生成されています。通常使用されていないこのブロックを最前面・全画面表示し、さらにその前面に同じdivブロックにbeforeクラスを使用してgifアニメーションを表示しています。

これらのブロックを時間差でanimationさせることにより、任意の時間でローディングアニメーションを非表示にすることができます。
なお、"#extra-div-1"はbackgroundを"black"から"transparent"に、"#extra-div-1:before"はopacityを"1"から"0"にそれぞれ動かしています。これはdisplayやbackground-imageに対してanimationが適用されないためです。なので、両方に"pointer-events: none;"を適用してアニメーション終了後の操作に影響を及ぼさないようにしています。

コード

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License