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.

Final details are being refined, and this capability is being rolled out across all libs gradually.

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.

Preload effects generally do not appear at design time, only in the published site.