MoreLesson 181Free preview

Loaders

This lesson is part of How To · All levels

Summary

This lesson discusses the loader, an animation that shows that a process is going on. Loaders are often created with CSS only using rotating borders or animated keyframes. In addition to the display, the loading status should be announced to the screen reader and the animation discontinued for users who choose reduced motion.

Key points

Make a circle with a border, then give a different color on one side for a rotating effect.
Use @keyframes and animation to rotate elements continuously
Add status text or role="status" to let the screen reader know the process is running
Respect preferences-reduced-motion by turning off or simplifying animation

Full lesson

Code examples and quizzes

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