# 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="https://891064830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz8oqtXqtdhOM4CxRzekr%2Fuploads%2FYTdqQjwbKAwql3IrN2Fv%2Floading-overlay.gif?alt=media&#x26;token=6620ed41-59a8-4e49-8f26-01dc096cef48" 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>