Loading Screens for e-Learning

Having seen some loading screen examples shared by other community members in the Articulate e-Learning Heroes community, I thought I would do some investigation on why we would use these in e-Learning. Here’s what I found out.

The Wikipedia definition of a loading screen is “a picture shown by a computer program, often a video game, while the program is loading or initializing”.

Wikipedia also goes on to say “the loading screen does not need to be a static picture.  Some loading screens display a progress bar or a timer countdown to show how much data has actually loaded”.

Published Articulate Storyline course content is preloaded in a specific order. The first screen will load and play while the assets for the next 3 screens are loading. Therefore, if the first screen is a “loading screen” with a reasonable length timeline, this allows time for the next 3 screens and then all subsequent screens to load, making playback as smooth as possible.

Loading screens can also be used to display a list of objectives, tips, storyline or just humour whilst the following screens are loading.

These are some examples I came across while I was looking for inspiration…

  • We Make Online Videos – although this is a website, not e-Learning, this immediately caught my attention as potentially an interesting way to start a course, or introduce the organisation or company presenting the training
  • Little Big Room – a pictorial cartoon style loading bar. It is aimed not to only entertain online visitors while they are waiting, but also set the tone and give a hint of what will happen next
  • Relio – a clean contour style animated graphical presentation of a small square-shaped pocket-sized professional device that is aimed to provide you with a light

…and here is my attempt at designing a couple of loading screens. Click on the image below to view the demo.

Click on the image to view the demo

If you would like to see the workings behind this design, you can download the Storyline file here.


More Loading Screens for e-Learning

I was inspired to create this loading screen after I came across something similar made by another designer. Click on the image below to view the demo. Visit my Freebies page to download the Articulate Storyline 2 file.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s