Progress Bar

Shows students how far they've come and how far they have left to go. Works for lesson progress, fossil collection, or any goal with a measurable end.

Color
Size
Label
Icon
Value — 50%

Variants

Size

Use lg at the top of lesson screens. Drop to sm or xs when the bar is a secondary indicator in a card or tight layout.

lg — 24px
md — 20px
sm — 12px
xs — 6px

Color

Assign one color per subject and keep it consistent. Students will start associating the color with the subject before they even read the label.

yellow
green
red
orange
purple

Label

Overlay the student's fossil count directly on the bar. Pass a string like "120 / 300" to show how many they have and how many they need. Only works on lg and md.

lg · count
50 / 300
md · count
50 / 300
sm · count (ignored)

Icon

Add the fossil icon to make the count feel more like a reward than a metric. Use the icon alone, the count alone, or both together. Only shows on lg and md.

icon only
count only
50 / 300
count + icon
50 / 300
md · count + icon
120 / 300

Fill states

From empty to complete. At 100%, make sure the surrounding UI celebrates. The bar alone isn't enough.

0%
25%
50%
75%
100%

Usage

Put it at the top of every lesson screen and assign one color per subject. Students recognize their subjects by color before they read the label, so pick once and keep it consistent.

Use count and showIcon when the screen is about fossil progress. They're optional and independent: use one, both, or neither depending on the context.

Combinations

Put it above the question, not mid-paragraph. Add a count or subject label so students always know what they're tracking.

Biology
120 / 300
History
195 / 300
Maths
240 / 300
Secondary (no label)

Do's & Don'ts

Do

  • Pick one color per subject and stick to it. Consistency is what makes the color useful.
  • Use count + showIcon together. The fossil icon gives context to the number at a glance.
  • Use lg as the default. Smaller sizes only when the bar is a secondary indicator.

Don't

  • Don't use count on sm or xs. The text won't fit and will be silently ignored.
  • Don't change a subject's color mid-session. It breaks the visual pattern students rely on.
  • Don't animate to 100% silently. Reaching the end deserves a celebration state in the parent screen.

Related: Button (the primary action that advances the lesson after the bar fills) · Option Card (the answer the student picks before progress moves forward)