# Preloaders

{% hint style="warning" %}
EXPERIMENTAL\
Not yet part of SA5 release code. 
{% endhint %}

Preloaders refer to the display of elements prior to data-binding. Once data-binding is complete, the preloader state / elements are removed and the data-bound element(s) are shown. 

Scenarios;

* We want the element to appear as we've created it in the designer 
* We don't want to the element to appear
* We don't want the element to appear, however we want it to take up space 
* We want to show some kind of loading animation where the element would be  
* We want to show a completely different set of elements as a placeholder 

## Types of Preloaders

With **tenative** attributes and setup; 

### wfu-preload = none

Or, no preload attribute. 

Just show the element as is. Good when you have placeholder text, for example. 

### wfu-preload = hidden

The element is not visible, as though it did not exist.

### wfu-preload = invisible

The element is not visible, but takes up the space the element normally would in the designer.

## Future

{% hint style="info" %}
FUTURE: Everything here and below is Under Development
{% endhint %}

### wfu-preload = animated

The element is visible, but 100% masked.  

Sizing approach? Masking approach? Text is blacked out? 

#### wfu-preload-anim-style = ANIMATION STYLE NAME

Support a few different types of preloader animations 

#### wfu-preload-anim-class = CLASS-NAME

CLASS styling, e.g. colors and gradients?

Copy element from page 

### wfu-preload = custom

wfu-preloader-custom = NAME

## Custom Preloaders

Reference and clone. 

### wfu-preloader = NAME

A unique name for a custom preloader, where it will be found and cloned from.  

Non-cloning possibilities- 

* Child of databound element?
* Adjacent element 
* Referenced by position relationship to bound element 


---

# 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://attr.sygnal.com/sa5-data/binding-data/preloaders.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.