Spinner

REQUIRES JAVASCRIPT
This element requires both jQuery and corelogic-ui.min.js to function properly.

If you would like to only load the spinner, make sure to load @corelogic/clui/dist/js/components/spinner.js. This is for IE and Edge compatibility. Call window.clui.spinnerInit() to initialize the component.

For the spinner, we have to use an inline SVG element. IE 10, 11, and Edge do not support SVG animation. You may change the height and width, but keep in mind, the fallback image is 128x128, so we do not recommand making the spinner bigger than that.

Base Spinner

<svg class="spinner" width="128px" height="128px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
   <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>

Spinner Angular Component

This is an example Angular component for the CLUI spinner. It uses a detection method from Modernizer to detect if the browser supports SVG animation. (IE and Edge do not). The image path may need to be adjusted for your environment.

import { Component } from '@angular/core';

@Component({
  selector: 'app-cl-spinner',
  templateUrl: './templates/cl-spinner.html',
})
export class ClSpinnerComponent {
  public showSvg(): boolean {
  return !!document.createElementNS &&
    /SVGAnimate/.test(document.createElementNS('http://www.w3.org/2000/svg', 'animate').toString());
  }
}

Template

<div *ngIf="showSvg(); else elseBlock">
    <svg class="spinner" width="128px" height="128px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
        <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
    </svg>
</div>
<ng-template #elseBlock>
    <img src="../../node_modules/@corelogic/clui/dist/img/circular-spinner_Color.gif">
</ng-template>