Home>

There is a progress bar

let circle= null
function refreshCircle (percentage) {
  if (! circle) {
    circle= new ProgressBar.Circle (container, {
      color: '#aaa',
      //This has to be the same size as the maximum width to
      //prevent clipping
      strokeWidth: 4,
      trailWidth: 1,
      easing: 'easeInOut',
      duration: 5000,
      text: {
        autoStyleContainer: false
      },
      from: {color: '#aaa', width: 1},
      to: {color: '# 333', width: 4},
      //Set default step function for all animate calls
      step (state, circle) {
        circle.path.setAttribute ('stroke', state.color);
        circle.path.setAttribute ('stroke-width', state.width);
        const value= Math.round (circle.value () * 100);
        if (value >
= 0 &
&
 value <
= 20) {
        circle.setText ('some text'); }
        if (value >
= 21 &
&
 value <
= 40) {
        circle.setText ('some1 text'); }
        if (value >
= 41 &
&
 value <
= 60) {
        circle.setText ('some2 text'); }
        if (value >
= 61 &
&
 value <
= 100) {
        circle.setText ('some3 text'); }
      }
    });
    circle.text.style.fontFamily= '"Raleway", Helvetica, sans-serif';
    circle.text.style.fontSize= '2rem';
  }
  circle.animate (percentage);
}
refreshCircle (0.3)
setTimeout (()= >
 refreshCircle (0.1), 5000) 
#container {
  margin: 20px;
  width: 200px;
  height: 200px;
  position: relative;
} 
<
script src= "https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js" >
<
/script >
<
link href= "https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel= "stylesheet" type= "text /css" >
<
div id= "container" >
<
/div >

you need the text that is now in it to be displayed under it, and inside the progress bar (where the text is now), the percentage of loading is displayed, can this be done?

  • Answer # 1
    let circle= null
    const text= document.querySelector ('. text');
    function refreshCircle (percentage) {
      if (! circle) {
        circle= new ProgressBar.Circle (container, {
          color: '#aaa',
          //This has to be the same size as the maximum width to
          //prevent clipping
          strokeWidth: 4,
          trailWidth: 1,
          easing: 'easeInOut',
          duration: 5000,
          text: {
            autoStyleContainer: false
          },
          from: {color: '#aaa', width: 1},
          to: {color: '# 333', width: 4},
          //Set default step function for all animate calls
          step (state, circle) {
            circle.path.setAttribute ('stroke', state.color);
            circle.path.setAttribute ('stroke-width', state.width);
            const value= Math.round (circle.value () * 100);
            if (value >
    = 0 &
    &
     value <
    = 20) {
            circle.setText (value);
            text.innerHTML= 'some text';
            }
            if (value >
    = 21 &
    &
     value <
    = 40) {
            circle.setText (value);
            text.innerHTML= 'some1 text';
            }
            if (value >
    = 41 &
    &
     value <
    = 60) {
            circle.setText (value);
            text.innerHTML= 'some2 text';
            }
            if (value >
    = 61 &
    &
     value <
    = 100) {
            circle.setText (value);
            text.innerHTML= 'some3 text';
            }
          }
        });
        circle.text.style.fontFamily= '"Raleway", Helvetica, sans-serif';
        circle.text.style.fontSize= '2rem';
      }
      circle.animate (percentage);
    }
    refreshCircle (0.3)
    setTimeout (()= >
     refreshCircle (0.1), 5000) 
    #container {
      position: relative;
      width: 200px;
      height: 200px;
    }
    .wrapper {
      width: 200px;
      height: 200px;
      text-align: center;
    } 
    <
    script src= "https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js" >
    <
    /script >
    <
    link href= "https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel= "stylesheet" type= "text /css" >
    <
    div class= "wrapper" >
      <
    div id= "container" >
    <
    /div >
      <
    div class= "text" >
    Some text <
    /div >
    <
    /div >
    
  • Answer # 2
    let circle= null
    const text= document.querySelector ('. text');
    function refreshCircle (percentage) {
      if (! circle) {
        circle= new ProgressBar.Circle (container, {
          color: '#aaa',
          //This has to be the same size as the maximum width to
          //prevent clipping
          strokeWidth: 4,
          trailWidth: 1,
          easing: 'easeInOut',
          duration: 5000,
          text: {
            autoStyleContainer: false
          },
          from: {color: '#aaa', width: 1},
          to: {color: '# 333', width: 4},
          //Set default step function for all animate calls
          step (state, circle) {
            circle.path.setAttribute ('stroke', state.color);
            circle.path.setAttribute ('stroke-width', state.width);
            const value= Math.round (circle.value () * 100);
            if (value >
    = 0 &
    &
     value <
    = 20) {
            circle.setText (value);
            text.innerHTML= 'some text';
            }
            if (value >
    = 21 &
    &
     value <
    = 40) {
            circle.setText (value);
            text.innerHTML= 'some1 text';
            }
            if (value >
    = 41 &
    &
     value <
    = 60) {
            circle.setText (value);
            text.innerHTML= 'some2 text';
            }
            if (value >
    = 61 &
    &
     value <
    = 100) {
            circle.setText (value);
            text.innerHTML= 'some3 text';
            }
          }
        });
        circle.text.style.fontFamily= '"Raleway", Helvetica, sans-serif';
        circle.text.style.fontSize= '2rem';
      }
      circle.animate (percentage);
    }
    refreshCircle (0.3)
    setTimeout (()= >
     refreshCircle (0.1), 5000) 
    #container {
      position: relative;
      width: 200px;
      height: 200px;
    }
    .wrapper {
      width: 200px;
      height: 200px;
      text-align: center;
    } 
    <
    script src= "https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js" >
    <
    /script >
    <
    link href= "https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel= "stylesheet" type= "text /css" >
    <
    div class= "wrapper" >
      <
    div id= "container" >
    <
    /div >
      <
    div class= "text" >
    Some text <
    /div >
    <
    /div >