JSFiddle - React, Tailwind, and code Playground

HTML

<h1>HTML5 presentation progress</h1>
<div id="d">
 <progress id="p" value="0" max="100">0</progress>
</div>

CSS

h1, #d, #p { font-weight: bold; font-family: 'Lucida Grande'; font-size: 2em; width: 100%; margin-bottom: 1em; }

JavaScript

var el = document.getElementById(('value' in document.createElement('progress') ? 'p' : 'd'));

setInterval((function fn() {
    var d = new Date,
        h = d.getHours() - 19,
        m = h * 60 + d.getMinutes(),
        s = m * 60 + d.getSeconds(),
        µ = s + d.getMilliseconds() / 1000,
        p = (µ / 54).toFixed(3); // 5,400 secs in 1,5 hours, p is %
    el.innerHTML = p + '%';
    el.setAttribute('value', p);
    return fn;
}()), 42); // ~24 fps