<div id="body">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
<div id="head"></div>
<div id="progress"></div>
.segment {
  width: 0px;
  height: 25px;
  background-color: lime;
  float: left;
}

#body {
  width: 60px;
  height: 25px;
  border: solid grey 5px;
  float: left;
}

#head {
  width: 5px;
  height: 15px;
  margin-top: 10px;
  background-color: grey;
  float: left;
}

#progress {
  position: absolute;
  top: 12px;
  left: 90px;
  font-size: 18px;
  font-weight: bold;
}
let progress = document.querySelector('#progress');

let battery = {
  progress: '0%'
}

let icon = anime({
  targets: '.segment',
  width: 20,
  duration: 300,
  delay: anime.stagger(500),
  endDelay: 500,
  easing: 'linear', 
  loop: true
});    

let label = anime({
  targets: battery,
  progress: '100%',
  duration: 30000,
  easing: 'linear',
  round: 1, 
  update: function() {
    progress.innerHTML = battery.progress
  },
  complete: function() {
    icon.pause();
    icon.seek(icon.duration);
  }  
});   


  
 


        
 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js