如何使用载入栏制作动画

Question

在loading.io

中使用插件 loading-bar

我已包含js＆css文件。

心脏加载器：

<div style="width:300px; margin:auto"
   class="ldBar auto label-center"
   data-value="100"
   data-type="stroke"
   data-stroke="red"
   data-stroke-width="15"
   data-path="M90.5,23.2c0-12.5-10.2-22.7-22.7-22.7 c-13.6,0-20.9,8.6-22.3,13.8C44.3,8.9, 35.1,0.5,23.2,0.5C10.7,0.5,0.5,10.7, 0.5,23.2c0,22.2,36.5,45.3,45,55.9 C53.5,67.3,90.5,46.3,90.5,23.2z">
</div>

实际代码结果：

如何对此进行动画处理，从 0-> 100％

需要一些帮助。 谢谢。

Answer 1

您应该将data-value="0"设置为html元素，并像id这样设置和设置<div id="myHeart"属性，以便您可以更轻松地查询元素

然后在您的js代码中初始化ldbar

喜欢var bar1 = new ldBar("#myHeart");

您得到bar1变量并说

bar1.set(100)

它会自动设置动画