title: Adding text Javascript progressbar
body: <p>I would like to add a description text to my progress bar. This description text shoud appear at the left top of the bar. The best way to do it is by modifying my Javascript. It should be very easy to do but i don't have a lot of knowledge in js and I don't know how to do it.</p>
  
  <p>Here is the code : </p>
  
  <p>HTML : </p>
  
  <pre><code>&lt;div id="cont"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS : </p>
  
  <pre><code>#cont {
    margin: 10px;
    width: 100%;
    height: 5px;
    position: relative;
  }
  </code></pre>
  
  <p>JS :</p>
  
  <pre><code>var bar = new ProgressBar.Line(cont, {
      strokeWidth: 4,
      easing: 'easeInOut',
      duration: 1400,
      color: '#ed1100',
      trailColor: '#eee',
      trailWidth: 1,
      svgStyle: {width: '100%', height: '100%'},
      text: {
        style: {
          // Text color.
          // Default: same as stroke color (options.color)
          color: '#999',
          position: 'absolute',
          right: '0',
          top: '30px',
          padding: 0,
          margin: 0,
          transform: null
        },
        autoStyleContainer: false
      },
      from: {color: '#ed1100'},
      to: {color: '#ED6A5A'},
      step: (state, bar) =&gt; {
        bar.setText(Math.round(bar.value() * 100) + ' %');
      }
    });
  
    bar.animate(1.0);  // Number from 0.0 to 1.0
  </code></pre>
  
  <p>It also uses another JS you can find here : <a href="http://progressbarjs.readthedocs.org/en/1.0.0/" rel="nofollow noreferrer">http://progressbarjs.readthedocs.org/en/1.0.0/</a></p>
  
  <p>Code in use :
  <a href="https://jsfiddle.net/kimmobrunfeldt/k5v2d0rr/" rel="nofollow noreferrer">https://jsfiddle.net/kimmobrunfeldt/k5v2d0rr/</a></p>
  
  <p>Can someone help me to add this description text ?</p>