Spinner

A spinner, sometimes called a loader, is typically a circle or a similar shape that indicates something is currently loading. It is often animated to spin, hence its name.

Example

<div class="spinner" role="progressbar"></div>

.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

Accessibility

• If the progressbar is referring to a specific part of the page (not the entire page) you should use aria-busy="true" on the region of the page that will get new content after the loading is done. This gives screen readers an opportunity to wait until loading is done before they move past the unloaded content. You should in this case also add aria-describedby connected to the progressbar.

  <header>header and menu</header>
  <main>
      <div class="products" aria-busy="true">
          <div aria-describedby="spinner-description" role="progressbar" class="spinner"></div>
          <p id="spinner-description">Loading products</p>
      </div>
  </main>
  <footer>footer</footer>

• If you know the loading progress in percentage you should use aria-valuenow, aria-valuemin, and aria-valuemax. If you don't have this information you should leave these attributes out.

  <div class="spinner" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>