如何创建（或至少描述）带阈值的水平进度条？

Question

我想创建一个具有特定百分比阈值的水平图表 - 如果您曾经使用过 Battle.Net，有点类似于他们的下载栏：

Blizzard Download Bar

我肯定有它的名字，我只是不知道它是什么...

谢谢！

Answer 1

我做这个只是为了以防万一。有'fun'。您可以编辑小阈值指针，使它们看起来很时尚 css。但是是的，这一切都取决于你想做什么

// Btw, I'm a big fan of the canvas element that's why I'm doing this. Otherwise, you can also use a progress bar
var c = document.getElementById('progressBar'),
  dt = document.getElementById('download-text'),
    btn = document.querySelector('button'),
    p2 = document.querySelector('progress');

var cx = c.getContext('2d');
var counter = 0,
  loop;

btn.onclick = function() {
  btn.innerText = 'N';
  var timeInter = setInterval(function(){
      btn.innerText += 'o';
    },70);
  setTimeout(function(){
    clearTimeout(timeInter);
    btn.hidden = true;
    p2.hidden = false;
    progress2();
  },1000);
}

var loop2 = '',
    counter2 = 0;
function progress2() {
  counter2++;
  var percentage = (counter2 / 17).toFixed(2);
  if (percentage - 0 >= 100) {
    percentage = 100;
  }
  
  p2.value = percentage - 0 +'';
  if (percentage - 0 > 100) {
    cancelAnimationFrame(loop2);
  } else {
    loop2 = requestAnimationFrame(progress);
  }
  //This is me failing to animate the progress bar
}

function progress() {
  counter++;
  var percentage = (counter / 17).toFixed(2);
  if (percentage >= 100) {
    percentage = 100+'.00';
  }
  dt.innerText = "Download: " + percentage + "%";
  
  cx.fillStyle = '#00FFFF';
  cx.fillRect(0, 0, c.width * percentage / 100, c.height);
  cx.strokeStyle = '#ccc';
  cx.beginPath();
  cx.moveTo(100, 70);
  cx.lineTo(100, 0);
  cx.stroke();

  cx.moveTo(300, 70);
  cx.lineTo(300, 0);
  cx.stroke();
  if (percentage - 0 > 100) {
    cancelAnimationFrame(loop);
  } else {
    loop = requestAnimationFrame(progress);
  }
}
progress();

#progressBar {
  border: 1px solid grey;
  z-index: -10;
}
#progressBar,
#download-text,
#playable,
#optimal,
button,
progress{
  position: absolute;
  top: 0px;
  left: 0px;
}
button,
progress{
  top:200px;
}
#download-text {
  height: 70px;
  padding-top: 25px;
  padding-left: 7px;
  font-family: sans-serif;
  background-color: transparent;
}
#playable,
#optimal {
  width: 100px;
  height: 43px;
  text-align: center;
  padding-top: 20px;
  font-family: sans-serif;
  font-weight: bolder;
}
#playable {
  background-color: yellow;
  position: absolute;
  top: 72px;
  left: 100px;
}
#optimal {
  background-color: green;
  position: absolute;
  top: 72px;
  left: 300px;
}

<div>
  <canvas id="progressBar" width="430px" height="70px"></canvas>
  <div id="download-text">Hello</div>
</div>
<div id="playable">PLAYABLE</div>
<div id="optimal">OPTIMAL</div>

<button type="button">Please don't press me just stick to canvas</button>

<progress max="100" hidden="true"></progress>

如何创建（或至少描述）带阈值的水平进度条？

How to create (or at least, describe) horizontal progress bar with thresholds?

javascript

css

charts

progress-bar