Configure How Your Placeholders Look Before Data-Binding

EXPERIMENTAL Not yet part of SA5 release code.

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.


  • 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: Everything here and below is Under Development

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

Last updated