Spinner Examples

This component of the Design System is deprecated, which means it'll be replaced or removed soon. Until that, the Design System team will support existing implementations, but please avoid implementing this component in new projects.

Spinner



e-spinner

Show Pug

<e-spinner></e-spinner>

<e-spinner></e-spinner>

Small Spinner



[data-size="small"]

Show Pug

<e-spinner data-size="small"></e-spinner>

<e-spinner data-size="small"></e-spinner>

Medium Spinner



[data-size="medium"]

Show Pug

<e-spinner data-size="medium"></e-spinner>

<e-spinner data-size="medium"></e-spinner>

Large Spinner



[data-size="large"]

Show Pug

<e-spinner data-size="large"></e-spinner>

<e-spinner data-size="large"></e-spinner>

Spinner in Table



[data-size="table"]

Show Pug

<e-icon icon="pencil" type="table"></e-icon>
<e-spinner data-size="table"></e-spinner>
<e-icon icon="trash-o" type="table"></e-icon>

<e-icon icon="pencil" type="table"></e-icon>
<e-spinner data-size="table"></e-spinner>
<e-icon icon="trash-o" type="table"></e-icon>

Spinner With Text



[data-text="Loading..."]

Show Pug

<e-spinner data-text="Loading..."></e-spinner>

<e-spinner data-text="Loading..."></e-spinner>

Spinner Fullscreen



[data-fullscreen="true"]

Show Pug

<div style="position: relative; height: 300px;">
  <e-spinner data-fullscreen="true"></e-spinner>
</div>

<div style="position: relative; height: 300px;">
  <e-spinner data-fullscreen="true"></e-spinner>
</div>

Spinner Fullscreen With Text



[data-fullscreen="true"] [data-text="Loading..."]

Show Pug

<div style="position: relative; height: 300px;">
  <e-spinner data-fullscreen="true" data-text="Loading..."></e-spinner>
</div>

<div style="position: relative; height: 300px;">
  <e-spinner data-fullscreen="true" data-text="Loading..."></e-spinner>
</div>