v5 page loading spinner

• Press 1 to activate the demo
• Press 2 or Escape to deactivate the demo
• Press 3 to activate after 500ms

The full-page spinner doesn't cover the meganav by default.
Developers can override this with the additional class spinner--cover-all on the #section--content element.

Change demo to cover all

Test that it works with an alert message (press Escape to close).

Display alert message

In this example, we've added the spinner classes and the aria-busy attribute to the section containing the main page content (they are added automagically if they don't already exist).

<section id="section--content" class="section section--content spinner spinner--full-page" aria-busy="true">
        <h1>Page loading spinner</h1>
    </section>

Toggle it with:

// @param {string} id = 'section--content'
    UCASDesignFramework.spinners.activate(id)
    UCASDesignFramework.spinners.deactivate(id)
    // Waits 500ms before trying to activate if no other activation/deactivation commands received in the meantime.
    UCASDesignFramework.spinners.activateAfterDelay(id)
    

Or use the global bus:

// @param {string} id = 'section--content'
    UCASDesignFramework.bus.publish('df.spinner.activate', id)
    UCASDesignFramework.bus.publish('df.spinner.deactivate', id)
    // Waits 500ms before trying to activate if no other activation/deactivation commands received in the meantime.
    UCASDesignFramework.bus.publish('df.spinner.activateAfterDelay', id)
    

And subscribe to activation/deactivation notices:

// @param {string} id = 'section--content'
    var isActivatedSub = UCASDesignFramework.bus.subscribe('df.spinner.isActivated', function(id) {console.log('activated ' + id)})
    var isDeactivatedSub = UCASDesignFramework.bus.subscribe('df.spinner.isDeactivated', function(id) {console.log('deactivated ' + id)})