Skip to content

Loader

Loaders visually indicate when an operation is loading. This makes it visually clear that the user can't interact with the element until the loading process is complete.

PropData typeRequired?Description
containerBooleanNoWhether to create a container for the loader

Normal loader

template
<div style="width: 50%">
  <fw-loader />
</div>

No container

By default the <fw-loader /> component creates a container that takes up 100% of its parent's height. You can disable this by passing a :container="false" property. The loader renders centered in the middle of the first parent that has position: relative set.

template
<div style="position: relative">
  <div style="width: 50%">
    <fw-loader :container="false" />
  </div>
</div>