Give us feedback
Reactive icon

Shimmer Loading

Stable version 1.0.0 (Compatible with OutSystems 11)
Uploaded on 04 September 2022 by 
 (1 rating)

Shimmer Loading

This asset provice shimmer controls to use it inside the pages. A shimmer is a temporary animation placeholder for when a service call takes time to return data and we don't want to block rendering the rest of the UI. You can use shimmer to reserves space in your page to be filled when the data are ready.
Read more

This package allow you to place one or multiple shimmers into a page.

The shimmers inherit by default the following configuraiton:

  • Theme primary color for background and text rendering.
  • Outsystems UI typography sizing for ShimmerText and Lines.
  • Outsystems UI button size,color and shape for ShimmerButton. 

But you can override the colors and the sizing.

Check out the demo!!!

The package contains the following widgets:

  1. [UI Flow] ShimmerZone
    1. ShimmerContainer
    2. ShimmerRepeater
  2. [UI Flow] Shimmers
    1. ShimmerBlock
    2. ShimmerLine
    3. ShimmerText
    4. ShimmerImage
    5. ShimmerButton

The most important widget is the ShimmerContainer, it has a placeholder where its possibile to put the shimmers controls.

The ShimmerRepeater clone the content of the shimmer container, its usefull when you need to use shimmers for table loading or in pages with lists.


The Shimmer Container Control is rendered with [aria-hidden="true"] attribute, this setting removes the element and all of its children from the "accessibility" tree.

If you need to respect the WAI-Aria specification handle the attribute [aria-busy="true/false"] on the real data component ( ex the grid/table that show the real data) 

Release notes (1.0.0)
Reviews (0)