Skip to content

role status

Spinner draft v0.1.0

Says that something is loading when its length is unknown, as a turning ring with a label.

A spinner is the indeterminate loading indicator: a ring turns while a request, a page or a part of it loads, and a label names what loads, shown or kept for assistive technology. Use it for short waits in a small area (a button, a panel); for a long or measurable wait, a Progress bar; for content whose layout is known, Skeletons. Other systems call it an activity indicator, a loading indicator or a progress circle.

Playground

HTML 
<div class="ds-spinner" role="status" data-size="medium">
  <span
    class="ds-spinner__ring"
    data-part="ring"
    aria-hidden="true"
  ></span>
  <span
    class="ds-spinner__label"
    data-part="label"
    data-hidden
  >Loading projects</span>
</div>