如何制作改变起点的网站圆形进度条？ [关闭]答案

【问题标题】：how to make website circular progress bar which which changes starting point? [closed]如何制作改变起点的网站圆形进度条？ [关闭]
【发布时间】：2015-12-29 12:17:15
【问题描述】：

Check This Image我想为我的网站制作一个圆形进度条。通过单击按钮更改其起点。例如，单击按钮 1 时应从 270 度旋转，单击按钮 2 时应从 0 度旋转，单击按钮 3 时应从 90 度旋转，单击按钮 4 时应从 180 度开始旋转...... . 请帮我提前致谢..

【问题讨论】：

你想达到什么目的？你能进一步解释一下吗？你能发布一张你网站的图片来看看你的按钮是如何工作的吗？
您好，欢迎使用 stackoverflow - 请参阅此帮助文章 stackoverflow.com/help/how-to-ask 以改进您的问题。
附加图像，，我真正想要的是当我单击动画按钮时，进度条从按钮的最左角开始，然后制作一个圆圈......其余按钮相同。 .Hope U Got @GeorgeGkas
@Prokor 我想我明白了。
添加您目前尝试过的内容。

标签： javascript html css web

【解决方案1】：

首先请记住，这不是一个明确的答案，因为正确的答案会花费我编码的时间。

我最近使用了来自 github 的开源库。链接在这里。 https://github.com/kottenator/jquery-circle-progress

这正是您想要的（经过一些修改）。

这是一个例子。 https://kottenator.github.io/jquery-circle-progress/

如果您看到第四个进度圈，您会看到您可以设置自己的起始角度。

让我在这里解释一下以示例四为参考如何实现：

/*
 * Example 4:
 *   - solid color fill
 *   - custom start angle
 *   - custom line cap
 *   - dynamic value set
 */
var c4 = $('.forth.circle');

c4.circleProgress({
    startAngle: -Math.PI / 4 * 3,
    value: 0.5,
    lineCap: 'round',
    fill: { color: '#ffa500' }
});

使用StartAgle可以设置进度条的起始值。您可以轻松更新代码以一遍又一遍地制作圆圈，直到您想要加载的内容。在此处查看库的使用情况：https://github.com/kottenator/jquery-circle-progress#usage

也看到这个答案： https://stackoverflow.com/a/13371976/4108694

【讨论】：

非常感谢.... @GeorgeGkas
@Prokor 如果您有任何问题，请给我评论。您也可以随时投票并批准我的回答。