javascript - how to fill a 100% progress bar according to the time specified by the user

I'm creating a progress bar to use in a pomodoro. The idea is that this bar is filled 100% according to the time specified in the pomodoro. Example if it is 30 min then at 30 minutes it must reach 100%.

let progressBar = document.getElementById("progressBar");
let value = 30
let seconds = 120

let dataValue = progressBar.setAttribute("data-value", `${value}`)

dataAttribute = progressBar.getAttribute('data-value');
console.log(dataAttribute)

let bar = 0


progressBar.style.width = bar;

let id = setInterval(function(){
    bar++;
    progressBar.style.width = bar + "%"
    if (bar >=dataAttribute){
        clearInterval(id)
    }
},1000)

.progress {
    width: 100%;
    background-color: #ddd;
    margin-bottom: 15px;
}

.progress-bar {
    width: 0;
    height: 10px;
    background: #c49b66;
    text-align: center;
    line-height: 30px;
    color: white;
    transition-duration: 5s;
    transition-timing-function: ease;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href=".3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />

    <link rel="stylesheet" type="text/css" media="screen" href="svg.css" />
    <title>Hello, world!</title>
  </head>
  <body>
    <div class="progress">
      <div class="progress-bar" id="progressBar">progress</div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script
      src=".3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script
      src=".js/1.14.7/umd/popper.min.js"
      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
      crossorigin="anonymous"
    ></script>
    <script
      src=".3.1/js/bootstrap.min.js"
      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
      crossorigin="anonymous"
    ></script>
    <script src="svg.js"></script>
  </body>
</html>

let progressBar = document.getElementById("progressBar");
let value = 30
let seconds = 120

let dataValue = progressBar.setAttribute("data-value", `${value}`)

dataAttribute = progressBar.getAttribute('data-value');
console.log(dataAttribute)

let bar = 0


progressBar.style.width = bar;

let id = setInterval(function(){
    bar++;
    progressBar.style.width = bar + "%"
    if (bar >=dataAttribute){
        clearInterval(id)
    }
},1000)

.progress {
    width: 100%;
    background-color: #ddd;
    margin-bottom: 15px;
}

.progress-bar {
    width: 0;
    height: 10px;
    background: #c49b66;
    text-align: center;
    line-height: 30px;
    color: white;
    transition-duration: 5s;
    transition-timing-function: ease;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn./bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />

    <link rel="stylesheet" type="text/css" media="screen" href="svg.css" />
    <title>Hello, world!</title>
  </head>
  <body>
    <div class="progress">
      <div class="progress-bar" id="progressBar">progress</div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script
      src="https://code.jquery./jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.14.7/umd/popper.min.js"
      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn./bootstrap/4.3.1/js/bootstrap.min.js"
      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
      crossorigin="anonymous"
    ></script>
    <script src="svg.js"></script>
  </body>
</html>

How it should work: If the user wants to put 30 min, then the progress bar must advance according to the time and when it reaches 30 min it is when the bar should reach 100%

the idea is to do it in vanilla javascript not jquery. thanks for your help

Share asked Nov 13, 2019 at 17:26 Carlos Tello 111 silver badge3 bronze badges

So add an input and set it in the code. Not sure what the issue is. – epascarello Commented Nov 13, 2019 at 17:37
The issue is that for example set up 1 min when the bar progress is in the 60 second the progress bar filled to 60%. And should be min 60 100% filled. – Carlos Tello Commented Nov 13, 2019 at 19:43

Add a ment |

2 Answers 2

Sorted by: Reset to default 5

I would not trust using intervals/timeouts to make an accurate countdown. So use timestamps and calculate the difference. Basic idea here showing how to use timestamps and basic math to update a progress element.

function setUpProgressBar(selector, startTime, endTime, update) {

  var timer
  var elem = document.querySelector(selector)
  var max = endTime - startTime
  elem.max = max

  var setValue = function() {
    var currentTime = new Date().getTime()
    var ellasped = currentTime - startTime
    if (ellasped >= max) {
      ellasped = max
      window.clearTimeout(timer)
    }
    elem.value = ellasped
    var prec = ellasped/max * 100
    elem.setAttribute("data-label", prec.toFixed(2) + '%')
  }

  setValue()
  timer = window.setInterval(setValue, update)
  return
}

var start1 = new Date()
var end1 = new Date()
end1.setMinutes(end1.getMinutes() + 5);

setUpProgressBar("#pb1", start1.getTime(), end1.getTime(), 100)

var start2 = new Date()
start2.setMinutes(start2.getMinutes() - 20);
var end2 = new Date()
end2.setMinutes(end2.getMinutes() + 5);
setUpProgressBar("#pb2", start2.getTime(), end2.getTime(), 1000)

var start3 = new Date()
start3.setMinutes(start3.getMinutes() - 60);
var end3 = new Date()
end3.setMinutes(end3.getMinutes() + 1);
setUpProgressBar("#pb3", start3.getTime(), end3.getTime(), 100)

progress {
  text-align: center;
  height: 1.5em;
  width: 100%;
  -webkit-appearance: none;
  border: none;
  position:relative;
}
progress:before {
  content: attr(data-label);
  font-size: 0.8em;
  vertical-align: 0;
  position:absolute;
  left:0;
  right:0;
}

<progress id="pb1"></progress>

<progress id="pb2"></progress>

<progress id="pb3"></progress>

You can do something like this:-

// Assuming that you want the progress to finish in 10 seconds
let seconds = 10;
let id = setInterval(function(){
    bar++;
    progressBar.style.width = bar + "%"
    if (bar >=dataAttribute){
        clearInterval(id)
    }
}, seconds * 1000 / 100)

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - how to fill a 100% progress bar according to the time specified by the user - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)