NProgress.js进度条

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>NProgress.js进度条</title><script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.js"></script><link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.css" rel="stylesheet"><style>.cons {width: 100%;height: 50px;position: fixed;top: 100px;}.bar {position: absolute;top: 50%;}.spinner {position: absolute;left: 50%;}</style>
</head><body><div class="cons"></div><script>NProgress.configure({minimum: 1, //开始时的最小百分比，0.08// template: '<div></div>', //进度条自定义HTMLease: 'ease', //缓冲动画speed: 3500, //动画速度trickle: false, //自动递增trickleSpeed: 800, //每次步进间隔showSpinner: true, //是否禁用进度环trickleRate: 0.02, //每次步进增长parent: ".cons" //父元素，默认body});NProgress.start();NProgress.set(0.2); //设置进度条百分比，0-1NProgress.inc(0.3); //进度条增加随机量，最大0.994setTimeout(() => {NProgress.done(); //进度条满格NProgress.remove(); //移除进度条}, 3000);</script><script>console.log("%c ", 'margin-left:0px;padding:100px 100px;background-image: url("https://liujianwei695.gitee.io/minifile/images/officialAccount.jpg");background-size: 200px 200px;background-position: center;background-repeat: no-repeat;');</script>
</body></html>

二、效果演示

具体显示效果可根据注释说明进行配置。

标签：JavaScript，HTML，NProgress，进度条，插件

更多演示案例，查看 案例演示

欢迎评论留言!

NProgress.js进度条相关推荐

vue实现进度条隐藏_Vue 中使用 NProgress 实现进度条
简介:NProgress 是浏览器加载时,出现在浏览器顶部的进度条. 文章目录: 一.NProgress 安装二.NProgress 使用三.NProgress 配置四.Vue 中修改进度条颜色 ...
nprogress设置进度条
一.安装nprogress 1.在(项目)终端输入命令:cnpm install --save nprogress 安装成功在项目package.json可看到 2.引入.使用nprogress st ...
分享21个JS抽奖转盘特效，36个JS表单验证，31个JS进度条，总有一款适合您
分享21个JS抽奖转盘特效,36个JS表单验证,31个JS进度条,总有一款适合您下载链接:https://pan.baidu.com/s/1TWOGqes5J2baelO9qdItXg?pwd=ma ...
GitHub上24.3kStar的js进度条插件，确定不关注一下？
在web应用开发中,有很多加载资源或者网络等待的场景需要在界面上做一个加载动画,让用户知道你这个应用程序正在运行而不是已经挂掉了. 应用场景如果你经常使用GitHub,那应该会注意到GitHub点击 ...
nprogress插件进度条
一.安装依赖 npm install nprogress -S 二.引入进度条 NProgress 及对应样式(request.js 文件中) import NProgress from 'nprog ...
php js 进度条,JavaScript实现简单动态进度条效果
这篇文章主要为大家详细介绍了JavaScript实现简单动态进度条效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了js实现动态进度条效果的具体代码,供大家参考,具体内容如下 ...
vue使用nprogress（进度条）
目录 1.安装 2.引入 3.配置 4.使用 5.使用场景 6.改变颜色 1.安装 npm install --save nprogress 2.引入 import NProgress from 'n ...
html原生js进度条圆形,原生 JavaScript 实现进度条
原生JavaScript特效 JavaScript实现进度进度条实现介绍使用JavaScript实现进度条功能. 原理:通过鼠标移动事件,获取鼠标移动的距离. 步骤: (1)html 中 div ...
java导出excel带上进度条_导出数据至Excel前台js进度条不能隐藏
在导出数据至Excel时,有时数据会比较大,响应的时间会比较长,想做一个提示进度条,在点击导出数据按钮进,进度条显示出来,在数据导出完毕并成功弹出保存对话框时,进度条自动隐藏起来,但现在有个问题,点击 ...

NProgress.js进度条

目录

一、代码

二、效果演示

NProgress.js进度条相关推荐

最新文章

热门文章