Opportunity Standard

The Spinner is a generic animation used to indicate a long process is taking place. It must appear during processing times so that the user is aware that their input was received and that the system is working to generate a response.

Either copy and paste spinner code into your document or programmatically add the Spinner markup using the included script.

import Spinner from '@nycopportunity/pattern-elements/src/spinner/spinner';

let el = document.querySelector('[data-js="my-loading-container"]');
let spinner = new Spinner();
let loading = document.createElement('div');

loading.appendChild(spinner);
el.appendChild(loading);