JSFiddle - React, Tailwind, and code Playground

by skeemer

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="time-bar">

</div>
<div class="log">
  stuff
</div>

CSS

.time-bar {
  width: 90%;
  height: 20px;
  background-color: white;
  margin: 1em auto;
  position: relative;
}

.time-bar .segment {
  color: red;
  height: 20px;
  position: absolute;
  top: 0;
}

.log {
  background-color: lightyellow;
  padding: 1em;
}

JavaScript

var times = [{
  span: {
    start: 22,
    end: 45
  }
}, {
  span: {
    start: 45,
    end: 89
  }
}];

var $bar = $('.time-bar'),
  $log = $('.log');
$.each(times, function(i, log) {
  $log.append('<p>Loading ' + i + '</p>');
  var start = ;
  var $segment = $('<div class="segment">&nbsp;</div>');
  $segment.css('left', log.span.start.toString() + '%');
  $segment.css('width', '30px');
  $log.append($segment.css('left'));
  $bar.append($segment);
});