Как доработать прогресс бар?

Question

есть прогресс бар от progressbar.js

// [email protected] version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/

var bar = 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: 1400,
  text: {
    autoStyleContainer: false
  },
  from: { color: '#aaa', width: 1 },
  to: { color: '#333', width: 4 },
  // Set default step function for all animate calls
  step: function(state, circle) {
    circle.path.setAttribute('stroke', state.color);
    circle.path.setAttribute('stroke-width', state.width);

    var value = Math.round(circle.value() * 100);
    if (value === 0) {
      circle.setText('');
    } else {
      circle.setText(value);
    }

  }
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';

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

#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>

его нужно немного доработать, что бы текст шел как тут (выполните код и увидите пример, что я подразумеваю под фразой "текст шел":

const crice = document.querySelector('.progress__crice'); 
const text = document.querySelector('.alert-text');
const radius = crice.r.baseVal.value;
const circumference = 2 * Math.PI * radius;

crice.style.strokeDasharray = `${circumference} ${circumference}`;
crice.style.strokeDashoffset = circumference;

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

const setProgress = async (percent) => {
  for (let i = 0; i < 100; i += 1) {
    await sleep(30);
    percent++;

    const offset = circumference - (percent / 100) * circumference;
    crice.style.strokeDashoffset = offset;   
    
    //Немного топорно, но пофиг.

    if (percent === 10) { 
      text.innerHTML = 'Инициализация протокола'
    } 

    if (percent === 22) { 
      text.innerHTML = 'Загрузка мира'
    } 

    if (percent === 55) { 
      text.innerHTML = 'Удаление ненужных данных'
    }
  } 
};

setProgress(0);

*,
*:before,
*:after {
  box-sizing: border-box;
  vertical-align: top;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  font-size: inherit;
  text-decoration: none;
  font-family: "Roboto", sans-serif;
}  

html, body {  
  background-color: #fff;
  height: 100%; 
}

.wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 15px;
}

.crice { 
  display: flex;
  justify-content: center;
  align-items: center; 
  flex-direction: column;
  height: 100%;
}

.alert-text { 
  display: inline-block;
  color: #000;
}

<body>
    <div class="wrapper">
      <div class="crice">
        <svg class="progress" width="120px" height="120px" stroke='#e5e5e5' stroke-width='10px'>
          <circle class="progress__crice" cx="60" cy="60" r="52" fill='transparent' />
        </svg>  
        <div class="alert-text">Загрузка</div>
      </div>  
    </div> 
    <script src="script.js"></script>
  </body>

стиль должен быть такой как в примере №1, что то моих знаний не достаточно, поэтому прошу Вас помощи.

БЛОГ НА HUSL

Как доработать прогресс бар?

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