Features

This loading frame is essentially a component. We set its position to fixed, and adjust the height to 100vh. We pin it to the top, right, and left of the viewport to ensure it covers the whole website viewport.

This component has three variants: "Start", "Arrive", and "Leave". We create animations on these variants and connect them with an 'appear' interaction. That way, everything happens automatically when the website loads.

When you paste this component onto your website, make sure to add the "pointer events" style and set it as "none." Additionally, include a "Z-index" style with a high number to ensure it appears above everything.

Check the tutorial video to learn more.