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, 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 to improve the accessibility of the web page for screen readers and other assistive technologies. 

3.1 SVG and graphics

3.1.1 Positions

3.1.2 Viewport

3.1.3 ViewBox

3.1.4 Shapes in SVG

3.2 Applying styles to SVGs

3.2.1 Fill

3.3 Animation module

3.3.1  Animation property

3.3.2 Keyframes and Animation name

3.3.3 Duration

3.3.4  Iteration count

3.3.5 Animation shorthand property

3.3.6 Delay

3.4 Transform origin

3.5 Accessibility and the reduced motion query

3.6 Styling an HTML progress bar

3.6.1 Styling the progress bar

3.7 Vendor Prefixes

3.7.1 Appearance property

3.7.2 Styling the progress bar for -webkit- vendor prefixed browsers

3.7.3  Browser prefixes Styling the progress bar for -moz- vendor prefixed browsers