Overlays & Loading screens Overlays & Loading screens are useful when you want to inform your visitor that he should wait while your pages are loading or an action is executed.

Basic

To create an overlay with loading icon you need to specify the color scheme by using the data-theme anchor attribute. Opacity can be set using the data-opacity anchor attribute.

Opacity

You can use the data-opacity attribute to specify one of the following values: 60 - for 60% opacity, 100 - for 100% opacity and 80 - for 80% opacity.

Box refresh

You have the possibility of adding refresh buttons to content box headers.

To view the available content boxes options & configurations you can visit the AgileUI Content Boxes documentation page.

Refresh button Refresh button

This content box has a refresh button in its header that uses the .bg-white core helper for the overlay, data-opacity set to 60% and loading image set to dark - using the data-style="dark" attribute.