Skip to main content
MybringDesign System

Spinners

Indicating that something is happening

Sizes

The spinner has three size classes: spinner, spinner--l and spinner--xl 

<div class="spinner">
<!-- or spinner--l or spinner--xl -->
<svg class="spinner__circular" viewBox="25 25 50 50">
  <circle
    class="spinner__path"
    cx="50"
    cy="50"
    r="20"
    fill="none"
    stroke-width="6"
    stroke-miterlimit="10"
  />
</svg>
</div>

In a submitting button

<button disabled class="btn btn--green">
<div class="spinner">
  <svg class="spinner__circular" viewBox="25 25 50 50">
    <circle
      class="spinner__path"
      cx="50"
      cy="50"
      r="20"
      fill="none"
      stroke-width="6"
      stroke-miterlimit="10"
    />
  </svg>
</div>
</button>

Indicate content loading

Loading entries
<div class="mal tc">
<div class="text-1.25r">Loading entries</div>
<div class="spinner--xl">
  <svg class="spinner__circular" viewBox="25 25 50 50">
    <circle
      class="spinner__path"
      cx="50"
      cy="50"
      r="20"
      fill="none"
      stroke-width="6"
      stroke-miterlimit="10"
    />
  </svg>
</div>
</div>