Progress bar - single or multiple for multi-step process?

by caseym   Last Updated February 10, 2019 13:16 PM

Is it better to switch status bars in-place when the next process occurs? Or do users prefer to see stacked bars for each step?

I am developing a status page where the user submits data and the following occurs:

  1. CSV file is uploaded to S3
  2. Records are imported into database
  3. Success message is displayed (or error, if one occurs)

I can show percentage progress during the file upload, but cannot track progress while records are imported. At the high end this process can take 2 to 3 minutes.

The site is built in Bootstrap 2. What I am planning to do is display a single status bar, that shows percent progress for file upload in blue. Then it changes to green when the file is uploaded. Text below will say 'File uploaded successfully'.

Then it changes to blue striped animated while processing the CSV file. Then that changes to green when it is done. Another text status is added that says 'File processed successfully, xx records imported.' Does that sound appropriate?

Tags : progress-bar

Related Questions

Updating progress bar when identifying extra work

Updated March 12, 2017 17:16 PM

Progress Tracker with 2 levels

Updated April 20, 2017 13:16 PM

How to implement busy spinner with button

Updated August 10, 2018 23:16 PM

At what point does a user lose trust in a BusySpinner

Updated September 12, 2016 08:06 AM

Distorting data on progress bars?

Updated October 09, 2018 20:16 PM