目录
一、代码二、效果演示一、代码
<!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="/ajax/libs/nprogress/0.2.0/nprogress.js"></script><link href="/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，进度条，插件
更多演示案例，查看案例演示
欢迎评论留言!
