Loading Screen #3

Component Structure

• LS3 WRAPPER (Div): Acts as the primary container for the loading screen elements, applying foundational styles through the ls3__component CSS class.

  • LS3 COL (Div): Multiple columns designed to create a visual effect or structure for the loading screen, each styled with the ls3__col CSS class.

  • LS3 LOGO (Image): An image element that serves as the logo or central visual element for the loading screen, styled with the ls3__logo CSS class.

Animation Structure

• LS3 - PAGELOAD Timeline: This timeline is triggered on page load and consists of animations targeting the .ls3__logo and .ls3__col elements, as well as the .ls3__component itself.

  • Logo Fade Out: Targets .ls3__logo, making it fade out with a duration of 0.4 seconds, starting after a 0.2-second delay.

  • Column Height Reduction: Targets .ls3__col, animating each column's height to 0% over 0.4 seconds, with a stagger effect applied to create a sequential animation across columns.

  • Component Collapse: Targets .ls3__component, reducing its visibility and collapsing it over 0.4 seconds. This effectively ends the loading screen display.