3 Creating a responsive animated loading screen
This chapter covers
- Creating basic shapes using Scalable Vector Graphics (SVGs)
- Finding out the difference between viewbox and viewport in SVG
- What keyframes are and how we can animate SVG graphics from one size to another
- Using the animation property to set the duration, style, how many times the loader should animate and how to delay when animations should start
- How to style SVGs using CSS
- How to style an HTML progress bar element with appearance properties
We see loaders in most applications today. These loaders are used as a way to communicate to the user something is loading, uploading, or waiting for something. It gives the user confidence that something is happening.
Without some sort of indicator to tell the user something is happening the user may try reloading, go back and click the link again, or just give up and leave. We should be using some sort of progress indicator when an action takes longer than one second, this is when users tend to lose focus and question if there is a problem. As well as having a visual graphic showing something is happening, the loader should be accompanied with text that tells the user what is happening to improve the accessibility of the web page for screen readers and other assistive technologies.