Links

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.
Last modified 18d ago