Progress Bars, Meters, and Indicators in E-Learning

Progress Meters in E-Learning #60: Challenge | Recap

Challenge of the week

This week your challenge is to show how progress indicators can be used in e-learning. Here are a few examples to help you get started.

Showing Progress in Quiz and Results Slides

Give your learner's a visual indicator of their remaining quiz questions using a simple progress meter. Another option would be to colorize completed questions to indicate correct and incorrect responses.

Montse Anderson

View demo | Montse Anderson | Website | @mLearning

Showing Learner Progress

Keep your learners informed about their progress with this avatar-based progress indicator.

Learner Progress

Atsumi-O-Meter: View Download

Course Progress Indicator

A simple approach is to use images to represent the progress of each slide like Tom shared in his security demo.

Course Indicator

Employee Security: View

Course Progress (Advanced)

Community member Alexandros Anoyatis shared a free template that uses advanced variables to drive the menu's progress meter.

Course Progress

Menu Toolkit: View | Download 


Articulate Super Hero Bruce Graham shared a thermostat-themed progress indicator.


Bookmarking demo: View | Download


Here are some helpful discussions, demos, and downloads to help you get started. We're happy to give you a hand with ideas or technical help. If you get stuck, let us know!

Video Tutorials

Visual Feedback Gauge

How to Design Visual Feedback Meters in Articulate Storyline

This video workshop on creating feedback meters in Storyline uses similar techniques for progress indicators.

Forum Discussions, Examples, and Tutorials

Last Week’s E-learning Challenge:

Examples of E-Learning Games for Kids

E-Learning Games for Kids #59: Challenge | Recap

New to the E-learning Challenges?

The weekly challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.

If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure.

If you share your demos on Twitter, try using #ELHChallenge so your tweeps can track your e-learning coolness.

Share Your Progress Meter Examples!

We have a new progress bars challenge for 2019. Head over to the current challenge to share your work.

How are Designers Using Progress Bars in E-Learning? (2019) #224