rProgressbar是一个跨浏览器、易于使用的jQuery线性进度指示器，它可以帮助您根据百分比生成一个动画的、可自定义的水平条。

使用纯JavaScript、HTML和CSS构建。不需要画布和SVG。也可以用作条形图来表示你的技能、经验、工作进度等。

参见：

• 最佳圆形/径向进度条插件
• 最佳进度条jQuery插件
• 顶级JavaScript和CSS进度条组件

如何使用它:

1.在文档中加载jQuery JavaScript库和rProgressbar插件。

<link rel="stylesheet" href="/path/to/jquery.rprogessbar.min.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jQuery.rProgressbar.min.js"></script>

2.加载jQuery路点插件，仅当进度指示器滚动到视图中时执行动画（可选）。

<script src="/path/to/jquery.waypoints.js"></script>

3.附加功能r进度条到任何占位符元素，并在JavaScript中指定百分比，如下所示。

<div class="jqueryscript"></div>

$('.jqueryscript').rProgressbar({
  percentage: 99
});

4.要禁用路点集成，您需要对源代码进行一些小的更改：

// replace...
$(this).waypoint(lineProgressBarInit, { offset: '100%', triggerOnce: true });
 
// with...
lineProgressBarInit();

5.自定义进度指示器的外观：

• 填充颜色
• 背景颜色
• 边界半径
• 钢筋高度
• 条宽

$('.jqueryscript').rProgressbar({
  percentage: 99,
  fillBackgroundColor: '#ed1c24',
  backgroundColor: '#EEEEEE',
  borderRadius: '0px',
  height: '10px',
  width: '100%'
});

6.确定是否显示百分比计数。默认值：true。

$('.jqueryscript').rProgressbar({
  percentage: 99,
  ShowProgressCount: false
});

7.自定义动画的持续时间。默认值：1000ms。

$('.jqueryscript').rProgressbar({
  percentage: 99,
  duration: 2000
});

更新日志：

2021-12-30

• 添加了RTL支持

预览截图

jQuery中 线性进度指示器 rProgressbar