<svg width="200" height="20" data-value="40">
  <path class="bg" stroke="#ccc" d="M0 10, 200 10"></path>
  <path class="meter" stroke="#09c" d="M0 10, 200 10" style="stroke-dasharray: 200; stroke-dashoffset: 200;"></path>
</svg>

body {
  display: grid;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
svg path {
  fill: none;
  stroke-width: 20px;
  stroke-miterlimit: round;
  transition: stroke-dashoffset 850ms ease-in-out;
}
View Compiled 
// console.clear();

const meters = document.querySelectorAll('svg[data-value] .meter');

meters.forEach( (path) => {
  // Get the length of the path
  let length = path.getTotalLength();

  // console.log(length) and hardcode the value for both stroke-dasharray & stroke-dashoffest styles
  // If unable to hardcode, set dynamically...
  // path.style.strokeDashoffset = length;
  // path.style.strokeDasharray = length;

  // Get the value of the meter
  let value = parseInt(path.parentNode.getAttribute('data-value'));
  // Calculate the percentage of the total length
  let to = length * ((100 - value) / 100);

  // Trigger Layout in Safari hack https://jakearchibald.com/2013/animated-line-drawing-svg/
  path.getBoundingClientRect();
  // Set the Offset
  path.style.strokeDashoffset = Math.max(0, to);  
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.