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.

Next lesson: Linear gradient

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies