jquery进度条代码—js进度条代码 收藏 0

如何在 WordPress 中添加 CSS 进度条（无 jQuery 或 JavaScript）

最近有一个项目，需要一些简单的动画进度条，但不想损害网站的性能或安装另一个 WordPress 插件。因此，开始寻找一种无需 JavaScript 或 jQuery 的 CSS 解决方案，幸运的是找到了一个很棒的解决方案。

这是完成后的外观预览。您可以根据自己的喜好调整大小、颜色、填充宽度等。它速度快如闪电，在侧边栏中运行良好，并且对移动设备具有响应能力。

栏内文字

感谢最初发布代码的cherryflavorpez。我只是稍微改变了一下。以下是您需要的 HTML。您可以在 WordPress 块编辑器的 HTML 代码块中输入此内容。

下面是您需要的 CSS。您可以将其输入到 HTML 代码块、WordPress 定制器中，或者作为诸如GeneratePress 之类的主题中的元素/挂钩。

代码有帮助吗？如果是这样，请随时在下面发表评论。分享您如何调整它以更好地适合您的网站。

自创插件简单易用的自创进度条插件

之前Rel_soul同学发了一个进度条生成的代码演示：

http://www.gbtags.com/gb/rtreplayerpreview/1138.htm

感觉很赞~有了这些工具，生成进度条就容易很多，老板再也不担心生成进度条费事了~

不过这几个链接好归好，可是有几个小缺点：

1.这个进度条，因为是从网络上拿的svg，所以造成了必须联网的情况下才能使用。对于我这种在外包公司里混的人，很容易碰到那种完全局域网的情况，所以这个就没办法用。

2. 这个进度条是更换图片，所以没有动画效果…

恩，所以我就根据soul发的链接，自己研究了一下，做了一个jquery插件，完全本地环境，并且支持动画。如果做的不好还请见谅~

1. 代码github地址：https://github.com/clarkfbar/jquery.progress

参数支持

1. var settings = {

2. width: 90, // 进度条宽度

3. height: 20, // 进度条高度

4. percent: 0, // 当前占比

5. backgroundColor: \’#555\’, // 进度条背景颜色

6. barColor: \’#d9534f\’, // 进度条颜色

7. radius: 4, // 边角圆度

8. fontSize: 12, // 字体大小

9. increaseTime: 1000.00/60.00, // 每一次调整进度条的时间, 默认最佳时间(可以调大，不要调小)；只有在animate为true的情况下有效

10. increaseSpeed: 1, // 每次调整，增长速度；只有在animate为true的情况下有效

11. animate: true // 调整的时候，是否使用动画增长，默认为true

12. };

我提供了一个动画的开关，因为当上传文件小的时候，animate的动画方法是完全没有必要的~

初始化插件：

1.引入插件和jquery

2. 在页面要放入进度条的地方，放如一个svg：

1. <svg id=\”svg\”></svg>

3. 调用插件：

1. var progress = $(\”#svg\”).Progress({

2. percent: 20,

3. width: 180,

4. height: 40,

5. fontSize: 16

6. });

4. 如果要修改进度

1. progress.percent(90); // 修改进度条占比，并返回当前值。如果参数为空，返回当前值

有动画效果：(初始化4秒后从10%升到90%)

（具体效果请前往原文查看）

（具体效果请前往原文查看）

把玩代码：

http://www.gbtags.com/gb/rtreplayerpreview/1225.htm

点击阅读原文，学习更多干货。

Vue项目开发，nprogress进度条加载之超详细讲解及实战案例

Nprogress的默认进度条很细，它的设计灵感主要来源于 谷歌，YouTube

他的安装方式也很简单，你可以有两种使用方式:

• 直接引入js和css文件
• 使用npm安装的的方式

直接引入：

Npm安装：

你可以调用 start() 和done()来进行进度条的控制

如果你准备在jQuery的Ajax调用接口的时候使用它的话可以考虑将其绑定到 到jQuery ajaxStart和ajaxStop事件。

下面是一个简单的实例：

百分比设置

你可以调用.set(n)设置进度百分比，，其中n是0..1之间的数字。你可以手动的设置进度条的位置（百分百0.0~1.0之间）

设置进度条的递增

更改启动时使用的最小百分比。(默认值:0.08)

NProgress.configure({ minimum: 0.1 });

你甚至可以修改进度条的模板，但要保证在页面留有一个一个role=\’bar’元素。

});

可以使用easing (CSS easing字符串)和speed (ms)调整动画的设置。(默认值:ease和200)

你可以通过parent来设置进度条的父容器，默认父容器是body

另外 本插件的css体积很小，你可以使用它或者选择自己写一个也没问题。

在router/index.js中创建如下代码：

并在main.js中引入 ./router

nprogress 很优美、灵活，我们可以通过源码看到他的所有可以设置的参数

那么可以根据我们项目需求进行相应的设置。 欢迎关注交流批评指正。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com