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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bricksmotion.gitbook.io/bricksmotion-components/components/loading-screens/loading-screen-3.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.