javascript动画卡片的边框以显示进度

Question

您好，我想使用矩形卡片的周长作为进度条来创建类似卡片的元素（如离子）。 我知道使用 svg 路径我可以使用自定义形状为进度条设置动画。

有没有办法让路径响应卡片的宽度和高度？ （欢迎使用 svg 或非 svg 解决方案）

谢谢！

Answer 1

这可以工作：

let prog = 0;

setInterval(function(){ 
  if (prog > 100) {
    return;
  }
  let loader = document.getElementById('loader');
  loader.style.height = "" + prog + "%";
  prog += 1;
}, 100);

.card {
  position: relative;
  float: left;
  background-color: lightgrey;
  width: 100px;
  height: 100px;
  z-index: 0;
}

#loader {
  position: relative;
  background-color: orange;
  height: 0px;
  width: 3px;
  float: right;
  z-index: 1;
}

<div class="card">
  <div id="loader">
  </div>
</div>

编辑1：

您可以像这样生成覆盖给定 DOM 元素 (rectangular) 的 SVG：

let cardRect = document.getElementById('card').getBoundingClientRect();
let svgRect = document.getElementById('rect');
svgRect.parentElement.setAttribute("height", cardRect.height);
svgRect.parentElement.setAttribute("width", cardRect.width);
svgRect.setAttribute("height", cardRect.height);
svgRect.setAttribute("width", cardRect.width);

#card {
  position: relative;
  float: left;
  background-color: lightgrey;
  width: 100px;
  height: 100px;
  z-index: 0;
}

<div id="card">
  <svg>
    <rect id="rect" style="fill:none;stroke-width:3;stroke:orangered"/>
  </svg>
</div>

然后你可以使用类似Progressbar.js的东西来动画它

编辑2：
如果您出于某种原因需要 svg 作为路径元素 （而不是 rect 元素） this code 可以工作。 （它必须在 JSfiddle 上，由于某种原因它不适用于 SO）