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元素（矩形）的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）

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

1 个答案: