updating existing text for ProgressBar.js circle

Question

I am using ProgressBar.js to create a circle with a percentage in the center. The circle creates properly but when I run it again, I want it to update the text (the percentage) with the new passed in value.

How can I do this? Currently, the code does not update the inner text.

Answer 1

Use circle.animate(value) or circle.set(value):

let circle = null

/**
 * @param percentage - decimal from 0 to 1 (0.7 => 70%)
 */
function refreshCircle(percentage) {
  if (!circle) {
    circle = /* initialize */
  }

  circle.animate(percentage)

  // or without animation:
  circle.set(percentage)
}

demo