Command Palette

Search for a command to run...

Hectal
Phase 10: Effects, Transitions and Animation
CSS · Exercise 3 of 5 PreviousNext
Intermediate

A loading spinner

Turn the .spinner circle into a loading spinner: write a @keyframes animation that rotates it one full turn, and attach it so it spins forever at a constant speed, one turn per second or faster.

What Check tests

  1. A @keyframes rule rotates something
  2. The spinner uses that animation
  3. It repeats forever
  4. It spins at a constant speed
  5. One turn takes 1s or less

Stuck? One hint at a time

The solution unlocks after your first Check. Try first: that is where the learning happens.

Runs in your browser. Your code is saved here.

Your page

Press Run to see the page.

Console

Nothing logged yet.