• 欢迎访问 流觞·曲水,WordPress教程,技术,分享,天文,古风,软件···
  • 推荐使用Firefox浏览器或Chrome浏览器访问本网站
  • 欢迎来到流觞·曲水O(∩_∩)O~~
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏流觞·曲水

NProgress-为WordPress添加简单漂亮的进度条

NProgress-为WordPress添加简单漂亮的进度条
NProgress.js 是纳米级的进度条插件。拥有逼真的的涓涓细流动画效果来告诉你的用户,某些事情正在发生。
它的灵感来自于谷歌的YouTube那道红色激光脉冲,它会在你切换页面时出现。
具体的效果可以在NProgress官网查看(点此前往),不得不说,还是很美观的!

如果你比较懒,或是对自己的动手能力不是很有信心,可以下载安装WP-NProgress插件,免去配置代码的麻烦。

下面是代码版部署教程。

代码版安装:

NProgress依赖于 jQuery (1.8版本及以上),不过现在一般的主题基本都会引入jQuery库;
项目已托管在github,前往下载NProgress文件。
添加 nprogress.jsnprogress.css 到你的主题根目录下。
使用方法:
在你的主题根目录下创建一个名为global.js的文件,内容如下

jQuery(function(){
NProgress.configure({
showSpinner: false
});
NProgress.start()
document.onreadystatechange = function() {
"complete" == document.readyState && setTimeout(NProgress.done, 500);
}
});

Functions.php中添加以下代码

/*NProgress加载进度条*/
function wpn_enqueue() {
 wp_enqueue_style( 'nprogresss', get_bloginfo('template_directory').'/nprogress.css' );
 wp_enqueue_script( 'nprogress', get_bloginfo('template_directory') . '/nprogress.js', array( 'jquery' ), '0.1.2', true );
 wp_enqueue_script( 'wp-nprogress',get_bloginfo('template_directory') . '/jglobal.js', array( 'jquery', 'nprogress' ), '0.0.2', true );
}
 add_action( 'wp_enqueue_scripts', 'wpn_enqueue' );

OK,配置完成。你可以刷新页面,测试下效果~

NProgress的参数配置

你可以自定义以下参数来个性化你的NProgress效果(以下代码来自小影)
通过 minimum 来修改最小百分比:

NProgress.configure({ minimum: 0.1 });

你可以通过 template 修改标记结构。为了保证进度条正常工作,需要一个包含 role='bar' 属性的元素。

NProgress.configure({
  template: "..."
});

通过 ease(一个 CSS 中的 easing 值) 调整动画设置和速度 speed (毫秒ms)。

NProgress.configure({ ease: 'ease', speed: 500 });

想关闭进度条步进?设置 tricklefalse

NProgress.configure({ trickle: false });

你可以调整 trickleRate (每次步进增长多少) 和 trickleSpeed (步进间隔,单位毫秒ms).

NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });

想禁用进度环?设置 showSpinnerfalse

NProgress.configure({ showSpinner: false });

NProgress: slim progress bars in JavaScript
NProgress官网 Github 项目


流觞·曲水 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明NProgress-为WordPress添加简单漂亮的进度条
喜欢 (1)
[847198075@qq.com]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(3)个小伙伴在吐槽
  1. 这个设计还是不错的 但是总觉得吧 实际使用起来有点鸡肋
    BanYuner 2016-09-06 11:37 回复
    • 这个加载进度条只是在加载过程中出现,如果你的网页 嗖~ 的一下就加载完了,访客根本注意不到哈
      一曲长歌辞烟雨 2016-09-06 11:59 回复
    • 网页加载速度和美观是一对矛盾,根据实际情况选用就好啦~
      一曲长歌辞烟雨 2016-09-06 12:00 回复
加载中……