如何使用加载栏制作动画

Question

中使用插件 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" 这样您可以更轻松地查询元素

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

像这样var bar1 = new ldBar("#myHeart");

你得到 bar1 变量然后说

bar1.set(100)

它会自动动画

如何使用加载栏制作动画

How to animate using loading-bar

javascript

jquery

loading