Page loading spinner

In this example, we've added the spinner classes and the aria-busy attribute to the section containing the main page content.

<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)})
  • ctrl + a to activate the demo
  • ctrl + d to deactivate the demo
  • ctrl + w to activate after 500ms