# Loading Screen #2

### Component Structure

* **LS2 Wrapper**: A fixed, fullscreen overlay that serves as the loading screen's background.
  * **LS2 Image Wrapper**: Contains the SVG and a mask div. The SVG represents the loading icon or graphic, while the mask div covers the SVG, revealing it gradually to simulate progress.
    * **LS2 SVG**: The actual SVG image used as the loading indicator.
    * **LS2 SVG Mask**: An overlay that reveals the SVG image beneath it, simulating a loading progress effect.

### Animation Structure

* **LS2 - PAGELOAD**: This animation sequence begins with the mask (`LS2 SVG Mask`) expanding its height to fully reveal the SVG image beneath it. Following this, the SVG image (`LS2 SVG`) scales down and fades out, signifying the end of the loading process. Lastly, the entire loading screen component (`LS2 Component`) animates out of view, revealing the loaded content.

<br>