Summary - Loader animation
Build a spinning loader with animation properties.
Pieces of a spinning loader
Building a spinning loader takes four pieces: a @keyframes spin block, an animation-name: spin declaration on the element, an animation-duration for the time, and animation-timing-function: linear for steady speed. For endless spinning add animation-iteration-count: infinite.
Inside the keyframes, the from and to steps hold transform: rotate(...). These five declarations form a spinning circle together.
Exercise Complete the spinning loader
Write a @keyframes block named spin: in the from step set transform: rotate(0deg), in the to step set transform: rotate(360deg). Then add to the .loader element: animation-name: spin, animation-duration: 1s, animation-iteration-count: infinite.
Show example solution
/* spinning loader */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.loader {
animation-name: spin;
animation-duration: 1s;
animation-iteration-count: infinite;
}Test yourself
-
Match each animation property to its role
- animation-name
- Binds the @keyframes name
- animation-duration
- Time of one turn
- animation-timing-function
- Speed curve
- animation-iteration-count
- Repeat count
-
Write the value for endless spinning
.loader { animation-name: spin; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: ____; }Show answer
.loader { animation-name: spin; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite; } -
Why use linear on a spinning loader?
.loader { animation-name: spin; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite; }- To make the animation shorter
- To avoid slowdown in the spin
- To play the animation backward
- To play the animation once
Show answer
To avoid slowdown in the spin — Correct. linear gives steady speed; the spin feels smooth.