可见时填充的可自定义进度条 - 绝对

版本:

浏览量:1049

最后更新：2021-09-10

应用标签：git MAC 软件 Jquery插件

推荐指数:

查看演示点击下载

详细信息

一个微小的（约 3kb 缩小的）jQuery 插件，用于创建高度可定制的线性进度条，当它们滚动到视图中时会填满。

用于可视化进度或完成情况，如技能、经验、加载状态等。

特征：

根据data-value属性中定义的百分比自动生成进度条。
所有自定义选项都可以通过 HTML 数据属性传递。
有或没有进度条标题。
支持 RTL（从右到左）。
自定义缓动功能和动画速度。
漂亮的动画工具提示。

也可以看看：

10 个最佳圆形/径向进度条 JavaScript 插件
JavaScript 和 CSS 中的 10 个最佳进度条（线性）组件

如何使用它：

1. 在文档中加载 jQuery Absolute ProgressBar 插件的缩小版本。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/js/progressBar.min.js"></script>

2. 如果要在屏幕上可见时为进度条设置动画，请加载 waypoint.js 库。可选的。

<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/3.0.0/noframework.waypoints.min.js"></script>

3. 加载最新的 jQuery 缓动库以获得额外的缓动功能。可选的。

<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/3.0.0/noframework.waypoints.min.js"></script>

4. 要创建一个基本的进度条，将 data-progress 属性添加到 CSS 类为 'ab-progress' 的容器中，并确定data-value属性中的百分比值如下。

<div class="ab-progress" data-progress data-value="70"></div>
<div class="ab-progress" data-progress data-value="75"></div>
<div class="ab-progress" data-progress data-value="90"></div>
<div class="ab-progress" data-progress data-value="90"></div>

5. 就是这样。您还可以通过调用目标容器元素上的函数来初始化进度条。

<div class="ab-progress example"></div>

$(".testing").progressBar({
  value: "70" // 70%
});

6. 为进度条添加标题。

<div class="ab-progress example" data-progress data-value="70" data-title="HTML5"></div>

// Or
$(".example").progressBar({
  value: "70",
  title: "HTML5",
});

7. 启用/禁用工具提示。默认值：“内联”。

<div class="ab-progress example" data-progress data-value="70" data-tooltip="true"></div>

// Or
$(".example").progressBar({
  value: "70",
  tooltip: true,
});

8. 对动画应用缓动函数。默认值：'摆动'。

<div class="ab-progress example" data-progress data-value="70" data-easing="easeInBounce"></div>

// Or
$(".example").progressBar({
  value: "70",
  easing: "easeInBounce",
});

9. 确定动画的持续时间。默认值：1500。

<div class="ab-progress example" data-progress data-value="70" data-duration="10000"></div>

// Or
$(".example").progressBar({
  value: "70",
  duration: 10000,
});

10. 启用和禁用自动播放。默认值：1500。

<div class="ab-progress example" data-progress data-value="70" data-autoplay="true"></div>

// Or
$(".example").progressBar({
  value: "70",
  autoplay: true,
});

11.确定是否使用航点库检测滚动位置，并在视口内动画进度条。默认值：真。

<div class="ab-progress example" data-progress data-value="70" data-waypoint="true" data-waypoint-offset="bottom-in-view"></div>

// Or
$(".example").progressBar({
  value: "70",
  waypoint-offset: "bottom-in-view",
});

12. 更多配置。

$(".example").progressBar({
  value: "70",
  showTitle: true,
  isRtl: "rtl",
});

13. 可用的回调函数。

$(".example").progressBar({
  value: "70",
  onInit: function () {
    // do something
  },
  onAnimatinStart: function () {
    // do something
  },
  onProgress: function () {
    // do something
  },
  onAfterProgress: function () {
    // do something
  },
  onComplete: function () {
    // do something
  },
  onError: function () {
    // do something
  },
  onEnd: function () {
    // do something
  },
});

14. Customize the styles of the progress bar using your own CSS.

.inline .progress-inline:nth-child(1) {
  --progressbar-fill: linear-gradient(to right, #84FFC9 0%, #AAB2FF 100%);
}
.inline .progress-inline:nth-child(2) {
  --progressbar-fill: linear-gradient(to right, #4A9B7F 0%, #0A3431 100%);
}
.inline .progress-inline:nth-child(3) {
  --progressbar-fill: linear-gradient(to right, #7C65A9 0%, #96D4CA 100%);
}
.inline .progress-inline:nth-child(4) {
  --progressbar-fill: linear-gradient(to right, #8DE9D5 0%, #32C4C0 100%);
}

联系我们