Loading

The loading component, prefixed by gds-loading, is used to indicate asynchronous loading of content. To show the indicator on a transparent overlay, add the gds-loading--bg class to the parent element containing gds-loading.

For a white variation, add the gds-loading__dot--white modifier class to gds-loading__dot.

Demo

<div className="-p-a-4">
    <div className="gds-loading">
      <div className="gds-loading__dot"></div>
    </div>
</div>

<div className="-p-a-4">
    <div className="gds-loading">
      <div className="gds-loading__dot"></div>
    </div>
</div>

Error Log

Context (Color)

gds-loading__dot--white

Size

gds-loading__dot--lg