## Preloader

### Preloader Container

The preloader container normally covers the full viewport. Below is a constrained demo.

Loading...

            <div
                class="preloader"
                style="position: relative; width: 100%; height: 200px"
            >
                <!-- Preloader content goes here -->
                <span>Loading...</span>
            </div>

### Lines Preloader

            <div
                style="
                    position: relative;
                    width: 100%;
                    height: 200px;
                    background: var(--color_surface_primary, #f5f5f5);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                "
            >
                <div class="preloader_lines">
                    <div class="preloader_line preloader_line_1"></div>
                    <div class="preloader_line preloader_line_2"></div>
                    <div class="preloader_line preloader_line_3"></div>
                    <div class="preloader_line preloader_line_4"></div>
                    <div class="preloader_line preloader_line_5"></div>
                </div>
            </div>

### Pulse Preloader

            <div
                style="
                    position: relative;
                    width: 100%;
                    height: 200px;
                    background: var(--color_surface_primary, #f5f5f5);
                "
            >
                <div
                    class="preloader_pulse"
                    style="top: 50%; left: 50%; transform: translate(-50%, -50%)"
                ></div>
            </div>

### Hidden Preloader State

Add the `preloader_hidden` class to hide the preloader after content loads.

This preloader is hidden

            <div
                class="preloader preloader_hidden"
                style="position: relative; width: 100%; height: 100px"
            >
                <span>This preloader is hidden</span>
            </div>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!