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 takes longer than 1 second, which is when users tend to lose focus and question whether there’s a problem. As well as having a graphic showing that something is happening, the loader should be accompanied by text that tells the user what is happening to improve the accessibility of the web page for screen readers and other assistive technologies.
For our animation, we’ll be looking into the CSS Animation Module, understanding the animation property, keyframes, and transitions, as well as accessibility and respect for user preferences.
In this project, we’ll be creating rectangles within an SVG. We’ll see what SVGs offer and understand the slight differences between styling HTML elements and SVG elements.