JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<div class="progress-bar-overlay">
    <div class="progress-bar"></div>
</div>

CSS

body {
    background: #777;
}
.progress-bar {
    background: #f00;
    width: 300px;
    height: 15px;
}

JavaScript

console.clear();

var height = 5;
var points = 4;

var bars = document.querySelectorAll(".progress-bar-overlay");
Array.prototype.forEach.call(bars, function (bar) {
    bar.style.position = "relative";
    var rect = bar.querySelector(".progress-bar").getBoundingClientRect();
    var canvas = document.createElement("canvas");
    canvas.style.position = "absolute";
    canvas.width = rect.width;
    canvas.height = rect.height;
    canvas.style.top = 0;
    canvas.style.left = 0;
    bar.appendChild(canvas);
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#777";
    ctx.fillRect(0, 0, rect.width, rect.height);
    ctx.globalCompositeOperation = "destination-out";
    ctx.fillRect(0, rect.height / 2 - height / 2, rect.width, height);

    var i = points;
    while (i--) {
        var x = ((rect.width - height * 3) / (points - 1) * i) + height * 1.5;
        var y = rect.height / 2;
        ctx.beginPath();
        ctx.arc(x, y, height * 1.5, 0, Math.PI * 2);
        ctx.fill();
        ctx.closePath();
    }
});

setInterval(function() {
    
}, 1000);