A spinner is a user-interface indicator that reassures users an operation is still underway, especially while a form waits for a server response. section 17.4.1
A practical button spinner combines:
- An is-loading state that hides the Save label and changes the button appearance. section 17.4.1
- An absolutely positioned pseudo-element shaped with a border and border radius. section 17.4.1
- A continuously rotating CSS animation, activated when JavaScript adds the state class. section 17.4.1
Save button loading state
When the user clicks Save, JavaScript prevents the default action, adds is-loading, disables the button and input, and leaves a spinning crescent visible while submission proceeds. section 17.4.1
Listing 17.12 Defining the spin animation and is-loading state
button.is-loading {
position: relative;
color: transparent; #1
}
button.is-loading::after {
position: absolute;
content: "";
display: block;
width: 1.4em;
height: 1.4em;
top: 50%; #2
left: 50%; #2
margin-left: -0.7em; #2
margin-top: -0.7em; #2
border-top: 2px solid white;
border-radius: 50%;
animation: spin 0.5s linear infinite; #3
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg); #4
}
}
Inspect the CSS that centers the pseudo-element and rotates it from 0 to 360 degrees indefinitely. section 17.4.1
