Menu
Coddy logo textTech

Final styling

Lesson 6 of 6 in Coddy's CSS Project - Simple Loading Spinner course.

Well done! you have a fully working loading spinner.

Now it's time to add your own style to it.

challenge icon

Challenge

Easy

Add some of your own styling to the spinner, and once you are finished, run the code and finish the project!

 

Some tips for further styling:

  • Changing the size
  • Changing the colors
  • border width and style
  • Adding more animations (maybe opacity?)
  • more and more...

Try it yourself

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="spinner" />
</body>
</html>

All lessons in CSS Project - Simple Loading Spinner

2The CSS Project

Size and ColorProject lessonSpin it!Project lessonBorder stylingProject lessonFinal stylingProject lesson