如何在 WordPress 中添加 CSS 进度条（无 jQuery 或 JavaScript）
最近有一个项目，需要一些简单的动画进度条，但不想损害网站的性能或安装另一个 WordPress 插件。因此，开始寻找一种无需 JavaScript 或 jQuery 的 CSS 解决方案，幸运的是找到了一个很棒的解决方案。
这是完成后的外观预览。您可以根据自己的喜好调整大小、颜色、填充宽度等。它速度快如闪电，在侧边栏中运行良好，并且对移动设备具有响应能力。
栏内文字
感谢最初发布代码的cherryflavorpez。我只是稍微改变了一下。以下是您需要的 HTML。您可以在 WordPress 块编辑器的 HTML 代码块中输入此内容。
下面是您需要的 CSS。您可以将其输入到 HTML 代码块、WordPress 定制器中，或者作为诸如GeneratePress 之类的主题中的元素/挂钩。
代码有帮助吗？如果是这样，请随时在下面发表评论。分享您如何调整它以更好地适合您的网站。
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
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
