samedi 29 avril 2017

Adding text Javascript progressbar

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.

Here is the code :

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

It also uses another JS you can find here : http://ift.tt/2pgruFt

Code in use : http://ift.tt/2qiHRjw

Can someone help me to add this description text ?




Aucun commentaire:

Enregistrer un commentaire