JSFiddle - React, Tailwind, and code Playground

by Brodingo

HTML

<div class="progress-bar-container">
<canvas class="thermometer" width="500" height="100"></canvas>
    <div class="progress-bar"></div>
</div>

<div class="progress-bar-container">
<canvas class="thermometer" width="250" height="50"></canvas>
    <div class="progress-bar"></div>
</div>

CSS

body {
    background-color: #666;
}

.thermometer {
    position: relative;
    display: block;
    z-index: 10;
}

.progress-bar-container {
    float: left;
    overflow: hidden;
    position: relative;
    margin: 20px;
    border: 5px solid #ccc;
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.4);
}

.progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-image: -webkit-gradient(linear, left top, left bottom,
        from(rgba(255,255,255,0.6)),
        color-stop(0.05, rgba(255,255,255,0.4)),
        to(rgba(255,255,255,0.0)));
    background-color: #428c0f;
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.4);

}

JavaScript

var canvas = $('.thermometer');

canvas.each(function(){
    var $this = $(this),
    ctx = $this[0].getContext('2d'),
    cw = $this.width(),
    ch = $this.height();

// Create gradients
    var radgrad = ctx.createRadialGradient(
        cw/10,
        cw/10,
        cw/6,
        
        ch,
        ch/2,
        0);

  radgrad.addColorStop(0, '#fff');
  radgrad.addColorStop(0.5, '#fff');
  radgrad.addColorStop(0.5, 'rgba(0,0,0,0)');
  radgrad.addColorStop(1, 'rgba(0,0,0,0)');

  ctx.fillStyle = radgrad;
  ctx.fillRect(0,0,cw,ch);

  ctx.clearRect(cw/8, ch/4, cw/1.25, ch/2);

});

$('.progress-bar').animate({
    width: '100%'
}, 5000);