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>', //进度条自定义HTML
ease: 'ease', //缓冲动画
speed: 3500, //动画速度
trickle: false, //自动递增
trickleSpeed: 800, //每次步进间隔
showSpinner: true, //是否禁用进度环
trickleRate: 0.02, //每次步进增长
parent: ".cons" //父元素，默认body
});
NProgress.start();
NProgress.set(0.2); //设置进度条百分比，0-1
NProgress.inc(0.3); //进度条增加随机量，最大0.994
setTimeout(() => {
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>演示：
转载于CSDN
版权属于：青城
本文链接：https://cloud.tencent.com/developer/article/1859270
转载时须注明出处及本声明
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-06-19，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
