Spinners

<div style="position:relative;height:200px">
  <div class="ecl-spinner ecl-spinner--primary ecl-spinner--medium ecl-spinner--centered ecl-spinner--visible"><svg
      class="ecl-spinner__loader" viewBox="25 25 50 50">
      <circle class="ecl-spinner__circle" cx="50" cy="50" r="20" fill="none" stroke-width="4px" stroke-miterlimit="10"
        vector-effect="non-scaling-stroke"></circle>
    </svg>
    <div class="ecl-spinner__text">Loading...</div>
  </div>
</div>

<div class="ecl-u-bg-blue" style="position:relative;height:200px">
  <div class="ecl-spinner ecl-spinner--negative ecl-spinner--medium ecl-spinner--centered ecl-spinner--visible"><svg
      class="ecl-spinner__loader" viewBox="25 25 50 50">
      <circle class="ecl-spinner__circle" cx="50" cy="50" r="20" fill="none" stroke-width="4px" stroke-miterlimit="10"
        vector-effect="non-scaling-stroke"></circle>
    </svg>
    <div class="ecl-spinner__text">Loading...</div>
  </div>
</div>