@vcl/vcl/busy-indicator/demo/example-circular.html

The whole VCL in one package

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.1.1/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<div>
  VCL SVG graphics, note the height and width of the icon are defined inline.
  <div class="row justify-center">
    <div class="busy-indicator icogram col justify-between" role="status">
      <div class="icon" aria-label="loading…" role="img">
        <img style="height: 3em; width: 3em;" src="https://cdn.jsdelivr.net/gh/vcl/vcl/modules/busy-indicator/imgs/vclBusyIndicatorCircular.svg" role="presentation">
      </div>
      <div class="text">Loading…</div>
    </div>
  </div>
</div>

<br><br>

<div>
  Icon from icon font.
  <div class="row justify-center">
    <div class="busy-indicator icogram col justify-between" role="status">
        <div style="margin-left: 0.5em;" class="icon fas fa-circle-notch fa-spin fa-3x fa-fw" aria-hidden="true" aria-label="loading…" role="img"></div>
      <div class="text">Loading…</div>
    </div>
  </div>
</div>