> For the complete documentation index, see [llms.txt](https://attr.sygnal.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://attr.sygnal.com/overview/preloaders.md).

# Preloaders

Much of SA5 is dedicated to creating a dynamic UX experience- sorting, filtering, data-binding, calculations, and much more.

This requires placeholder elements which - before the SA5 code executes, will be uninitialized.

To ensure a perfect view, we are standardizing on a specific preloader approach which can be controlled per-element using the wfu-preload attribute.

{% hint style="info" %}
Final details are being refined, and this capability is being rolled out across all libs gradually. 
{% endhint %}

## Options

`wfu-preload` = ( method ) 

* `hidden` - the element is initially hidden and collapsed from view using CSS display: none.
* `invisible` - the element is initially invisible, but takes space using CSS visibility: hidden.
* `animated` - the element has an element-specific loading animation. 

Animation types; 

* redacted, animated  
* SVG animation
  * dot-dot-dot
* static placeholder text
* blurred placeholder text, then unblurred on load 

## Technical Notes 

* All preloaders are CSS-based, and are driven by the wfu-preload attribute. 
* On load, the value is set first
* Then the wfu-preload attribute is removed. This gives the element its default visibility. 

{% hint style="info" %}
Preload effects generally do not appear at design time, only in the published site.
{% endhint %}