v145 · CSS · JavaScript · demo
Loading Spinner
A loading spinner that uses animationstart, animationend, and — crucially — onanimationcancel to track its state. Cancel the spinner by hiding it (display:none), removing it from the DOM, or clearing its animation-name — and watch the cancel event fire. Without animationcancel there's no way to know a spinner was interrupted.
Chrome 145+ —
element.onanimationcancel = fn property syntax via GlobalEventHandlers. addEventListener('animationcancel') worked before, but the property syntax (element.onanimationcancel) was not exposed. Both now work identically.
Click "Start spinner" · use the cancel buttons to interrupt it in different ways · observe which event fires in the log
Ready to start
Click "Start spinner"
Animation events
——Waiting for events
// onanimationcancel property syntax — Chrome 145
// Before: only addEventListener worked; .onanimationcancel = fn silently failed.
const spinner = document.querySelector('.spinner');
// addEventListener (always worked)
spinner.addEventListener('animationcancel', handleCancel);
// Property syntax (Chrome 145+)
spinner.onanimationcancel = handleCancel; // ← now works the same way
function handleCancel(event) {
// Fires when CSS animation is interrupted — e.g.:
// - element.style.display = 'none'
// - element.style.animationName = 'none'
// - element removed from DOM
cleanupLoadingState();
logEvent('cancelled', event.animationName);
}