Progress Bar Wizard

Create custom Storyline progress bars in minutes.

Horizontal Progress Bar
Step 1 of 5

Choose Your Slide Resolution

Select the dimensions of your Storyline course so the progress bar positions correctly.

Setup in Storyline

Complete these three tasks in your Storyline project. Mark each one as done when finished.

Access Your Slide Master
▾
  1. Open your Storyline project
  2. Click View in the top menu
  3. Select Slide Master
  4. Select the top-level slide master (the very first, larger thumbnail at the top of the panel). This ensures the progress bar appears on all slides in your course.
Create the Progress Variable
▾
  1. In the Triggers panel, select the Manage project variables icon
  2. When the Variables window opens, select the Create a new variable icon (looks like a plus sign)
  3. Name it: Progress
  4. Type: Number
  5. Default value: 0
  6. Click OK to create the variable
  7. Click OK again to close the Manage project variables window
Connect to Storyline's Progress
▾
  1. Still in Slide Master, look at the Triggers panel
  2. Select the Create a new trigger icon (looks like a piece of paper with a folded corner)
  3. Action: Select Adjust variable
  4. Variable: Select Progress
  5. Assignment: Select Set (not Add, Subtract, Multiply, or Divide)
  6. Value: Select Variable (not Value or Random)
  7. In the variable list, expand Built In → Slide Numbers → Project, then select Project.Progress (described as "Progress through project")
  8. When: Timeline starts
  9. Object: On this slide
  10. Click OK

Position Your Bar

Create a rectangle shape on your Slide Master to define where the progress bar will appear.

  1. In your Slide Master, insert a Rectangle shape
  2. Size and position it where you want the progress bar (a typical size is around 250 × 25 pixels)
  3. Give the rectangle any Fill color — do not use "No Fill," or the progress bar won't display. Set Outline to No Outline.
  4. Once positioned, set the Transparency of the rectangle to 100% so it is no longer visible
  5. Right-click the rectangle — the top line of the menu shows the Object ID. Click it to copy the Object ID.
  6. Paste the Object ID below

This ensures pixel-perfect positioning. You can leave this blank to use default detection.

Customize Appearance

Choose the colors and style for your progress bar.

Preview
65%

Your Code is Ready

Copy the code below and add it to your Storyline project.

✓

Progress bar generated

Paste this into a JavaScript trigger on your Slide Master.

  1. Copy the code below
  2. In Storyline, go to your Slide Master
  3. Open the Triggers panel
  4. Add a trigger: Execute JavaScript
  5. Paste your code into the JavaScript window
  6. Set When to Timeline starts and Object to On this slide
  7. Click OK
  8. Close Slide Master and preview your course
// Your code will appear here