> For the complete documentation index, see [llms.txt](https://bricksmotion.gitbook.io/bricksmotion-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bricksmotion.gitbook.io/bricksmotion-components/components/loading-screens/loading-screen-3.md).

# 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.