linkFull section loading
When the load time of a section is longer than 1 second, use a solid white overlay with a 48px loading icon in the center.
Once loading has completed, fade out the overlay displaying the content.

A comprehensive guide on how to consistently display loading content in an application, section, or component.
When the load time of a section is longer than 1 second, use a solid white overlay with a 48px loading icon in the center.
Once loading has completed, fade out the overlay displaying the content.
When loading a component, display the container outline adding a solid white overlay.
The 36px loading icon should be placed at the center of the component.
When the component has loaded fade out the overlay, displaying the content.
When the user clicks on the action and data needs to be processed, show the 16px animated icon inside the element.
Once the action has finished, display the check mark to show that the action completed successfully or the cross mark if something went wrong.
Use the loading svg icon from the EOS icons library, to indicate the loading state of an element, component, or page.
Once the loading is complete, use the CSS property from CSS code snippet to fade out the loading icon overlay and display the content.
<img src='loading.svg'>
transition: all 0.5s ease-out
Share your rebranded product to inspire other SUSE developers.
Tell us your name and your products' so that we can get in touch with you:
Thank you for for sharing your product success story with us.
Thank you for helping us improve EOS.