ButtonsLesson 106Free preview

Loading Buttons

This lesson is part of How To · All levels

Summary

The loading button displays a process indicator, usually a spinner, while the action is running. The button is also temporarily disabled so that users do not send the same request over and over again. Once the process is complete, the button is returned to its original state.

Key points

Spinners can be made from a border with rotating animation.
@keyframes defines 360-degree rotation movement.
The button is disabled during the process to prevent double-clicking.
JavaScript adds class loading, then deletes it when it's finished.
Always restore the button on the block finally so it doesn't get stuck in the event of an error.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.