javascript - 如何制作动画多色进度条？

Question

我是新手，所以如果我问的不是很清楚，我深表歉意。我正在尝试构建一个多色进度条，该进度条在页面加载时进行动画处理。我找到了与我正在寻找的类似的示例，但是 javascript/jquery 给我带来了问题。我不擅长那个领域。

示例 1:https://codepen.io/tamak/pen/hzEer

该链接显示了当页面出现并以特定百分比停止时，我希望栏如何逐渐扩展。

jQuery(document).ready(function(){
  jQuery('.skillbar').each(function(){
    jQuery(this).find('.skillbar-bar').animate({
      width:jQuery(this).attr('data-percent')
    },6000);
  });
});

示例 2:http://www.cssflow.com/snippets/animated-progress-bar/demo

非常非常接近我所追求的，但我希望进度条在没有按钮的情况下也能正常工作。颜色本身，从红色到绿色，是我想要实现的。

提前致谢!我知道这可能要求很高，但我希望有人愿意尝试一下。

Answer 1

也许这会有所帮助:Bootstrap progress bar with gradient color showing proportionally on active width

关于移动进度条，你希望它具体如何变化？您不需要按钮来执行此操作，但需要发生一些事情。你能更详细地解释一下那篇文章吗？