# 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