javascript - 添加文本Javascript进度栏

我想在进度栏中添加描述文字。此说明文字应显示在栏的左上方。最好的方法是修改我的Javascript。它应该很容易做到，但是我对js并不了解很多，也不知道该怎么做。

这是代码：

HTML：

<div id="cont"></div>

CSS：

#cont {
  margin: 10px;
  width: 100%;
  height: 5px;
  position: relative;
}

JS：

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) => {
      bar.setText(Math.round(bar.value() * 100) + ' %');
    }
  });

  bar.animate(1.0);  // Number from 0.0 to 1.0

它还使用另一个JS，您可以在这里找到：http://progressbarjs.readthedocs.org/en/1.0.0/

使用的代码：
https://jsfiddle.net/kimmobrunfeldt/k5v2d0rr/

有人可以帮我添加此说明文字吗？

最佳答案

你的意思是这样吗？
https://jsfiddle.net/k5v2d0rr/1996/

您可以使用自己的函数扩展“ bar”对象：

bar.addText = function(text) {
    jQuery(this._container).append("<label>" + text + "</label>");
}

然后，在加载栏之后调用函数。

bar.animate(1.0);  // Number from 0.0 to 1.0
bar.addText("Hi");

注意：为简单起见，我添加了jQuery用于DOM操作。