<h1>Who are you?</h1>

<div class="container">

  <form action="" class="form-example">

    <textarea name="answer" class="answer" placeholder="Keep writing till you are at 100 characters..."></textarea>

  </form>

​

  <div id="circle-container"></div>

</div>

body {

  margin: 20px auto;

  font-family: "Lato";

  font-weight: 300;

  max-width: 600px;

  width: 100%;

}

​

div.container {

  display: flex;

}

​

textarea {

  padding: 10px;

  font-family: "Lato";

  font-size: 1.5rem;

  width: 480px;

  height: 300px;

  outline: none;

}

​

#circle-container {

  width: 150px;

  height: 150px;

  margin: 0 20px;

}

​

const circleBar = new ProgressBar.Circle("#circle-container", {

  from: {color: "#ff0000"},

  to: {color: "#008800"},

  strokeWidth: 8,

  trailWidth: 1,

  trailColor: "#666",

  easing: "easeInOut",

  step: (state, shape) => {

    shape.path.setAttribute("stroke", state.color);

  }

});

​

const textArea = document.querySelector('form textarea');

​

textArea.addEventListener('keydown', (event) => {

  let content = event.target.value;

  const min_length = 100;

  let progress = content.length/min_length;

  if(progress > 1) {

    progress = 1;

  }

  circleBar.animate(progress, {

    duration: 50

  });

});

​

​