FEC Pattern Library

Loading overlay

The loading overlay indicates to users that the site is responding to their actions and actively processing an action. An overlay is placed over a table or list while results are filtered, sorted, or loaded.

GitHub issues

<div class="overlay__container">
    <div class="overlay is-loading">
    </div>
</div>
 
<div class="overlay__container">
  <div class="overlay is-loading">
  </div>
</div>
 
/* No context defined. */
  • Handle: @loading-overlay
  • Preview:
  • Filesystem Path: components/02-components/loading-overlay/loading-overlay.html