Skip to main content

Spinner

Types

Primary

Result
Loading...
Live Editor
<div role="status" aria-label="Loading process" class="fds-spinner fds-spinner--primary">
  <span class="fds-icon fds-icon--4xl fds-spinner__icon">
    <i class="fa-regular fa-spinner-third"></i>
  </span>
</div>

Secondary

Result
Loading...
Live Editor
<div role="status" aria-label="Loading process" class="fds-spinner fds-spinner--secondary">
  <span class="fds-icon fds-icon--4xl fds-spinner__icon">
    <i class="fa-regular fa-spinner-third"></i>
  </span>
</div>

Size

Result
Loading...
Live Editor
<div class="demo">
  <div role="status" aria-label="Loading process" class="fds-spinner fds-spinner--primary">
    <span class="fds-icon fds-icon--4xl fds-spinner__icon">
      <i class="fa-regular fa-spinner-third"></i>
    </span>
  </div>

  <div role="status" aria-label="Loading process" class="fds-spinner fds-spinner--primary fds-spinner--sm">
    <span class="fds-icon fds-spinner__icon">
      <i class="fa-regular fa-spinner-third"></i>
    </span>
  </div>
</div>

With label

Vertical

Result
Loading...
Live Editor
<div class="demo">
  <div role="status" aria-label="Loading process" class="fds-spinner fds-spinner--primary">
    <span class="fds-icon fds-icon--4xl fds-spinner__icon">
      <i class="fa-regular fa-spinner-third"></i>
    </span>
    <div class="fds-spinner__label">Process label</div>
  </div>

  <div role="status" aria-label="Loading process" class="fds-spinner fds-spinner--primary fds-spinner--sm">
    <span class="fds-icon fds-spinner__icon">
      <i class="fa-regular fa-spinner-third"></i>
    </span>
    <div class="fds-spinner__label">Process label</div>
  </div>
</div>

Horizontal

Result
Loading...
Live Editor
<div class="demo">
  <div role="status" aria-label="Loading process" class="fds-spinner fds-spinner--primary fds-spinner--horizontal">
    <span class="fds-icon fds-icon--4xl fds-spinner__icon">
      <i class="fa-regular fa-spinner-third"></i>
    </span>
    <div class="fds-spinner__label">Process label</div>
  </div>

  <div role="status" aria-label="Loading process" class="fds-spinner fds-spinner--primary fds-spinner--sm fds-spinner--horizontal">
    <span class="fds-icon fds-spinner__icon">
      <i class="fa-regular fa-spinner-third"></i>
    </span>
    <div class="fds-spinner__label">Process label</div>
  </div>
</div>