Preloaders

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.

Scenarios;

• 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

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