Button loading states
Find here some examples of how to implement a live loading button, for an indeterminate or determinate time. These examples are not part of the OUDS Web library and must be adapted to your project. You can find the code below.
Indeterminate loading
For this example, the time is set to 5 seconds by Javascript, but in a real project, you just need a callback when the action is finished. An update to the status is done every second to let the user know the download is still ongoing. This interval should be adapted to your context. Each time, a dot is added to the message to make sure it will change and then be vocalized by the screen readers.
Determinate loading
If known, the loading time must be set directly on the button, through the CSS variable --btn-loading-time. In this example, it is set to 4s for the 1st button, 6s for the 2nd button, 8s for the 3rd button, and 10s for the 4th button. This value will be used for the icon's animation. An update to the status is done every second, giving the percentage of time that has elapsed. This interval should be adapted to your context.
// Manage loading buttons looks and statuses
(() => {
'use strict'
const loadingButtons = document.querySelectorAll('[id^="loading-btn-"]')
loadingButtons.forEach(loadingButton => {
loadingButton.addEventListener('click', () => {
// Extract the number from the button's ID
const num = loadingButton.getAttribute('id').charAt(loadingButton.getAttribute('id').length - 1)
// Get the loading time from the CSS variable --bs-btn-loading-time, if specified. Otherwise, it means the loading time is undetermined
const loadingTime = getComputedStyle(loadingButton).getPropertyValue('--bs-btn-loading-time')
// Select the corresponding status message and loading animation elements
const statusMessage = document.querySelector(`#loading-msg-${num}`)
// Set the interval for updating the status message: it must be adapted to your use case.
// It can be 1000 if loading time is indeterminate, and can be something more adapted if loading time is known
const interval = 1000
let counter = 0
// Change the button's appearance by adding a loading class and disabling it
loadingButton.classList.add(loadingTime ? 'loading-determinate' : 'loading-indeterminate')
const href = loadingButton.getAttribute('href')
if (loadingButton.tagName === 'A') {
loadingButton.setAttribute('aria-disabled', 'true')
loadingButton.removeAttribute('href')
} else {
loadingButton.setAttribute('disabled', '')
}
// Show the status message and update it every 'interval' seconds
statusMessage.classList.remove('d-none')
statusMessage.innerHTML = loadingTime ? `Downloading file ${num} in ${loadingTime}` : `Downloading file ${num}`
const updateStatusMessageCall = setInterval(() => {
if (loadingTime) {
counter++
// Calculate the percentage of time that has elapsed to update status message
const percentTime = Math.round(counter * interval / (loadingTime.slice(0, -1) * 10))
statusMessage.innerHTML = `Downloading file ${num} in ${loadingTime}: ${percentTime}%`
} else {
statusMessage.innerHTML = `${statusMessage.innerHTML}.`
}
}, interval)
// Stop loading after the loading time or after 5 seconds the undetermined loading time of this demo
setTimeout(() => {
clearInterval(updateStatusMessageCall)
statusMessage.innerHTML = `Downloading file ${num} is complete`
loadingButton.classList.remove(loadingTime ? 'loading-determinate' : 'loading-indeterminate')
if (loadingButton.tagName === 'A') {
loadingButton.removeAttribute('aria-disabled')
loadingButton.setAttribute('href', href)
} else {
loadingButton.removeAttribute('disabled')
}
// Set focus back to the button for accessibility reasons
loadingButton.focus()
}, loadingTime ? (loadingTime.slice(0, -1) * 1000) : 5000)
})
})
})()