SVG Progress Circles Part 2 - With JavaScript

By Alex Pate on

This is a follow on post from my previous post a few weeks ago, about implementing an SVG progress circle using Sass. I mentioned briefly that it could be done in JavaScript, so here's the code:

Skip to demo

(This uses ES6, so you will need a compiler such as babel)

class ProgressCircle {
  constructor(percent, radius, elementClass) {
    this._percent = percent;
    this._radius = radius;
    this._elementClass = elementClass;
  }

  get percent() {
    return this._percent;
  }

  get radius() {
    return this._radius;
  }

  get elementClass() {
    return this._elementClass;
    return document.getElementsByClassName(this._elementClass)[0];
  }

  calcDashOffset() {
    let circumference = Math.PI * (2 * this.radius);
    return Math.floor(circumference - this.percent / 100 * circumference);
  }

  createCSS() {
    document.querySelectorAll(
      `.${this._elementClass} .donut__svg .donut__svg__circle--one`
    )[0].style.strokeDashoffset = this.calcDashOffset();
  }

  updateText() {
    document.querySelectorAll(
      `.${this.elementClass} .js-donut-figure`
    )[0].innerText = this.percent;
  }

  updateFigure(newStat) {
    this._percent = newStat;
    this.updateText();
    this.createCSS();
  }

  init() {
    this.updateText();

    setTimeout(() => {
      this.createCSS();
    }, 1000);
  }
}

var progress = new ProgressCircle(82, 90, 'donut');
progress.init();

If you're looking to dynamically update the donut, then you can use the updateFigure() function:

progress.updateFigure(25);