Battery fill Animation - alt

tappable are just 2nd and 4th bar - for welliba

by Ercan Cicek

HTML

<div class="battery-container">
  <svg width="246" height="307" viewBox="0 0 246 307" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M0.9769 288.319C7.24593 294.864 58.3085 306.37 131.36 306.997C195.178 307.219 245.752 295.795 245.998 288.319C246.408 274.771 180.651 272.493 119.56 274.771C56.3937 277.129 -8.7895 278.124 0.9769 288.319Z" fill="#EBEBEB" />
    <path d="M100 16H101V15V4C101 2.34315 102.343 1 104 1H142C143.657 1 145 2.34315 145 4V15V16H146H176C179.866 16 183 19.134 183 23V279C183 282.866 179.866 286 176 286H70C66.134 286 63 282.866 63 279V23C63 19.134 66.134 16 70 16H100Z" fill="#FAFAFD" stroke="#D6D6D6" stroke-width="2" />
    <path id="bar-5" d="M68 23C68 21.8954 68.8954 21 70 21H176C177.105 21 178 21.8954 178 23V69.8H68V23Z" fill="#D6D6D6" />
    <rect id="bar-4" onclick="animateToBar(4);" x="68" y="73.7998" width="110" height="48.8" fill="#D6D6D6" />
    <rect id="bar-3" x="68" y="126.6" width="110" height="48.8" fill="#D6D6D6" />
    <rect id="bar-2" onclick="animateToBar(2);" x="68" y="179.4" width="110" height="48.8" fill="#D6D6D6" />
    <path id="bar-1" d="M68 232.2H178V279C178 280.105 177.105 281 176 281H70C68.8954 281 68 280.105 68 279V232.2Z" fill="#D6D6D6" />
  </svg>
</div>

SCSS

body {
  background-color: #FAFAFD;

  .battery-container {
    >svg {
      >rect {

        &#bar-2 {
          cursor: pointer;
        }

        &#bar-4 {
          cursor: pointer;
        }
      }
    }
  }
  
  .box {
    width: 200px;
    height: 75px;
    background-color: gray;
    > .box-inner {
      width: 200px;
      height: 0;
      background-color: red;
      transition: height .1s ease;
    }
  }
}

JavaScript

document.getElementById('bar-4').addEventListener('click', function() {
	animateToBar(4);
});

function animateToBar(barNum) {
	for(var i=1; i <= 5; i++) {
    document.getElementById('bar-' + i).style.transition = 'none';
  	document.getElementById('bar-' + i).style.fill = '#D6D6D6';
  }
  setTimeout(function() {
  	for(var j=1; j <= barNum; j++) {
      document.getElementById('bar-' + j).style.transition = 'fill 0.1s ease ' + (j === 1 ? 0 : (j-1) * 0.125) + "s";
      document.getElementById('bar-' + j).style.fill = barNum === 2 ? '#FE9979' : '#66DEC4';
    }
  },10);

}