Inline loading

A small spinner that turns into a tick when it's done, in the same spot, so the answer lands where the tap was. The tick is the theme's success colour.

Markup

<span class="ob-inline-loading" id="saving" data-state="active" role="status" aria-label="Saving">
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <circle class="ob-inline-loading-track" cx="12" cy="12" r="10"/>
    <circle class="ob-inline-loading-arc" cx="12" cy="12" r="10" pathLength="100"/>
    <circle class="ob-inline-loading-disc" cx="12" cy="12" r="11"/>
    <path class="ob-inline-loading-tick" d="M7.5 12.5l3 3 6-6.5" pathLength="1"/>
  </svg>
</span>

Behaviour

import { inlineLoading } from "obvious/behaviours";

const loading = inlineLoading(el);
loading.start();
loading.finish(2000); // tick for 2s, then back to the spinner. 0 keeps the tick.

CSS

@import "obvious/css/components/inline-loading.css";

Knobs

Set any of these on the component, or an ancestor, to change it.

Property	Default
`--ob-loading-size`	22px
`--ob-loading-stroke`	2.5
`--ob-loading-spin`	800ms