<div id="hour" class="barclock">Hours</div>

<div id="minute" class="barclock">Minutes</div>

<div id="second" class="barclock">Seconds</div>

<p>Bar Clock implemented using CSS Variables, with JavaScript used only to update the CSS Variables once per second</p>

<h2>Read Tutorial: <a href="http://www.javascriptkit.com/dhtmltutors/css-variables-tutorial.shtml">Introduction to CSS Variables</a></h2>
:root{
  --hourpct: 0; /* value btw 0 to 1 for all 3 vars */
  --minutepct: 0;
  --secondpct: 0;
}

div.barclock{
  border: 1px solid gray;
  margin-bottom: 1em;
  padding: 10px;
  position: relative;
  overflow: hidden;
  font-weight: bold;
  text-transform: uppercase;
}

div.barclock:after{
  content: '';
  position: absolute;
  background: red;
  width: 100%;
  height: 100%;
  left: -100%;
  top: 0;
  z-index: -1;
  transform: translate3d(0,0,0);
}

div#hour:after{
  background: #00b9f1;
  transform: translate3d(calc(var(--hourpct) * 100%),0,0);
}

div#minute:after{
  background: #f9c00c;
  transform: translate3d(calc(var(--minutepct) * 100%),0,0);
}

div#second:after{
  background: #75D701;
  transform: translate3d(calc(var(--secondpct) * 100%),0,0);
}
var hourbar = document.getElementById('hour')
var minutebar = document.getElementById('minute')
var secondbar = document.getElementById('second')

setInterval(function(){
  var today = new Date()
  var curhour = today.getHours()
  var curminute = today.getMinutes()
  var cursecond = today.getSeconds()
  hourbar.style.setProperty('--hourpct', curhour/24)
  minutebar.style.setProperty('--minutepct', curminute/60)
  secondbar.style.setProperty('--secondpct', cursecond/60)
}, 1000)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.