3 Creating a responsive animated loading screen

This chapter covers

  • Creating basic shapes using Scalable Vector Graphics (SVGs)
  • Finding out the difference between viewboxes and viewports in SVGs
  • Understanding keyframes and animating SVGs
  • Using animation properties
  • Styling SVGs with CSS
  • Styling an HTML progress bar element with appearance properties

We see loaders in most applications today. These loaders communicate to the user that something is loading, uploading, or waiting. They give the user confidence that something is happening.

Without some sort of indicator to tell the user that something is happening, they may try reloading, click the link again, or give up and leave. We should be using some sort of progress indicator when an action ...

Get Tiny CSS Projects now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.