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;"を適用してアニメーション終了後の操作に影響を及ぼさないようにしています。