Loader

Use a loader to show that an operation is in progress. Trace CSS shows a static indicator when the user prefers reduced motion.

#Standalone loader

The Full build provides trace-loader. Give a standalone loader a status role and an accessible name.

<span class="trace-loader" role="status" aria-label="Loading"></span>

#Loading buttons

Set aria-busy="true" on a native button to show a centered loader in every build. Add disabled to prevent activation while work is in progress. With the Full build, a direct span.trace-icon child displays the loader alongside the visible label.

<button type="button" aria-busy="true" disabled>Saving</button>
<button type="button" class="trace-primary" aria-busy="true" disabled>
<span class="trace-icon" aria-hidden="true"></span>
Uploading
</button>
<button type="button" class="trace-secondary trace-outline" aria-busy="true" disabled>
<span class="trace-icon" aria-hidden="true"></span>
Loading
</button>
<button type="button" class="trace-icon-only" aria-label="Saving" aria-busy="true" disabled>
<span class="trace-icon"><!-- @license lucide-static v1.70.0 - ISC -->
<svg focusable="false" aria-hidden="true"
 
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" />
  <path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7" />
  <path d="M7 3v4a1 1 0 0 0 1 1h7" />
</svg>
</span>
</button>

#Loading overlay

Set aria-busy="true" on a container to show an overlay and a centered loader. Disable the form controls while the container is busy.

<section aria-busy="true">
  <h4>Profile settings</h4>
  <p>Loading your saved preferences.</p>
  <form>
    <label>
      Display name
      <input type="text" value="Alex" disabled />
    </label>
    <button type="button" disabled>Save</button>
  </form>
</section>

See Button tokens for button styling.