> For the complete documentation index, see [llms.txt](https://palo-alto.presidiocreative.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://palo-alto.presidiocreative.com/theme-settings/settings/loading-overlay.md).

# Loading overlay

The loading overlay is a UI component designed to visually indicate that something is loading or in progress on the page - such as the content being fetched, a page transition, or a background process.\
In this implementation, it’s a reusable block that can:

* Display a custom loading image defined in the theme settings.
* Fall back to a simple animated placeholder if no image is provided.
* Be conditionally shown or hidden based on a setting loading appearance.

This loading overlay is built using Liquid (Shopify's templating language) and rendered in HTML.

<figure><img src="/files/TAfrcFlf5d6A3oarTpWE" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="129.88104248046875">Settings</th><th width="143.704833984375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Upload or select an image to show in the loading overlay (e.g., logo, spinner).</td></tr><tr><td>Image width</td><td align="center"><code>range</code></td><td>Controls the width of the loading image.</td></tr><tr><td>Background</td><td align="center"><code>color</code></td><td>Choose the background color for the overlay.</td></tr><tr><td>Appearance</td><td align="center"><code>select</code></td><td>Controls when the loading overlay appears. Options: <code>First load</code>, <code>Always</code>, <code>Never</code>.</td></tr></tbody></table>