Как сделать так, чтобы граница двигалась вперёд, как индикатор прогресса - PullRequest
Новая
       8

Как сделать так, чтобы граница двигалась вперёд, как индикатор прогресса

0 голосов
/ 26 июня 2019

Мне бы хотелось, чтобы моя граница заполнялась каждую минуту, чтобы она была заполнена через 60 минут, а затем снова начиналась с самого начала.

Это упражнение для меня с реакцией.js, которую я уже пробовалсоздать переменную с помощью .getMinutes ();Теперь я могу потратить текущее количество минут, но не знаю, как заполнить границу за минуту 

<body>
        <div className="progress_container">
            <div className="progressbar">
                <p className="innertext">
                    <h2>{playtime + '/60'}</h2>
                    min
                </p>
            </div>
        </div>
</body>

.progress_container{
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: white;
    position: absolute;
    right: calc(100% - 600px);
    left: auto;
    bottom: calc(100% - 350px);

}
.progressbar{
    width: 190px;
    height: 190px;
    border-radius: 50%;
    border: 30px solid orange;

}
.progressbar:after{
    content: '';

}
p{
    color: #000;
    font-size: 16px;
    position: relative;
    top: calc(95px - 3*16px);
}

let pb = document.getElementsByClassName('progressbar');

    var date = new Date (Date.now());
    const playtime = date.getMinutes();

Я пытался найти другие решения, но это не сработалос Reaction.js.Часто на выходе были тонны ошибок

1 Ответ

0 голосов
/ 27 июня 2019

Невозможно изменить width из border, но вы можете создать полосу прокрутки следующим образом: 

.scrollbar-ctn {
  width: 100%;
  height: 5px;
  background-color: #999;
}

.scrollbar {
  height: 100%;
  width: 30%;
  background-color: blue;
}
<div class="scrollbar-ctn">
  <div class="scrollbar"></div>
</div>

, а затем вы можете просто обновить процент width из .scrollbar с js

...