3 Creating a responsive animated loading screen
This chapter covers
- Creating a Scaleable Vector Graphic (SVG) by creating basic shapes in SVGs to create our loader
- 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 it should animate and how to delay when animations should start
- How to style SVG graphics using CSS
- How to style an HTML progress bar element with vendor prefixes
We see loaders in most web and mobile 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 and that the application is not frozen.
Without some sort of indicator to tell the user something is happening the user may try reloading, going back and clicking the link again, or just give up and leave. We should be using some sort of progress indicator when an action takes longer than 1 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.