Доработать вывод цифр в прогресс баре

Question

Есть прогресс бар

    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>

нужно что бы текст который сейчас в нем выводился под ним, а внутри прогресс бара(где сейчас текст) выводились проценты загрузки, можно ли это осуществить?

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>

БЛОГ НА HUSL

Доработать вывод цифр в прогресс баре

Ответы (1 шт):