Javascript Workday进度条

Question

I'm trying to develop a progress bar which gets filled by the amount of time that has passed in two shifts at work.

The first one starts from 7:00 am to 17:00 pm and the second one is from 17:00 pm to 2:00 am from the next day.

I investigated and found this fiddle. in this part:

  $self.prev(".percent").text("0%");
  $.ease(0, targetVal, 10000, "swing", function (i) {
  $self.progressbar("option", "value", parseInt(i));
  $self.prev(".percent").text(parseInt(i) + "%");

The problem is that it fills the progress bar continuously, but I need it to stop the progress bar when there are lunch breaks, (9:30am to 10:00am, and 12:00pm to 12:30pm by example, in the first shift) and I truly don't know how to do it.

Which is the best approach possible to do it? I tried to convert the working hours to minutes (substracting the lunch breaks) but it still is incorrect.

Thanks in advance.