A simple HMTL5 time progress bar triggered by a given clock time?

Question

For a live astronomy video feed, I need to embed an html5 progress bar displaying actual time within a range from starting event time to ending event time.

Let's say Mercury transit. I would like to show a progress bar in the bottom of the screen that starts to fill from left to right as the transit starts on November, 11 2019 at 12:35:27 UT, and reaches the right cornet at the end of the transit same day at 18:04:14. Being able to place some time marks or tics along the bar should be a great plus.

I have tested countless combinations of hmtl, css and js with no success. Such a html page would be very helpful for broadcasting live astronomy phenomena lasting from minutes to hours, such as transits, occultations and eclipses.

Many thanks for any hint.

<!DOCTYPE HTML>
<html lang = "en">
<head>
  <!-- basic.html -->
  <title>basic.html</title>
  <meta charset = "UTF-8" />
</head>
<body>
  <h1>Mercury transit 2019-11-11</h1>
  <p>
    This bar shows the progress of the event from start at 12:35:27 UT, to finish at 18:04:14 UT.
  </p>

<link rel="stylesheet" type="text/css" href="loading-bar.css"/>
<script type="text/javascript" src="loading-bar.js"></script>


<div id="myItem1" data-preset="line" data-duration=30
  class="ldBar label-center"></div>

<script>
  var bar1 = new ldBar("#myItem1");
  var bar2 = document.getElementById('myItem1').ldBar;
  bar1.set(100);
</script>

.ldBar{position:relative;}.ldBar.label-center > .ldBar-label{position:absolute;top:100%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);text-shadow:0 0 3px #fff}.ldBar-label:after{content:" s";display:inline}.ldBar.no-percent .ldBar-label:after{content:""}

Attached to the question is the set of html, css and js used to generate a progress bar that is moving at a rather imprecise pace, showing time not formatted and starting when the page is load, rather than starting at a precise date/time. — Diego Rodríguez Peregrin, Oct 09 '19 at 10:09
I just don't know how to upload the loading-bar.js file to complete the html and css blocks just added to my question. Do you know how to add a js file? — Diego Rodríguez Peregrin, Oct 09 '19 at 10:23
Click the `[<>]` snippet editor and paste into the relevant panes — mplungjan, Oct 09 '19 at 11:10
I used .snipet that for html and css and worked fine. But the .js file has lots of strange codes when seen in a text editor. — Diego Rodríguez Peregrin, Oct 09 '19 at 12:01
And how can I link to a local file in my computer? There's no uplink file button. — Diego Rodríguez Peregrin, Oct 09 '19 at 12:04
You cannot. Normally we use a CDN but I looked and your JS is not stored anywhere — mplungjan, Oct 09 '19 at 13:45

A simple HMTL5 time progress bar triggered by a given clock time?

0 Answers0