# 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 %} --- # 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/overview/preloaders.md?ask= ``` 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.