使用代码为网页顶部加上加载进度条-凯尤木江博客圈

使用jQuery

$({property: 0}).animate({property: 100}, {

duration: 5000,//进度条加载进度的速度

step: function() {

var percentage = Math.round(this.property);

$('#progress').css('width', percentage+"%");

if(percentage == 100) {

$("#progress").addClass("done");//100%后消失

}

});

`css代码`

body{

margin:0;

}

#progress {

position:fixed;

height: 2px;

background:#b91f1f;

transition:opacity 500ms linear

}

#progress.done {

opacity:0

}

#progress span {

position:absolute;

height:2px;

opacity:1;

width:150px;

right:-10px;

}

@-webkit-keyframes pulse {

30% {

opacity:.6

}

60% {

opacity:0;

}

100% {

opacity:.6

}

网页可以用JS在body头部插入一个元素，作为进度条，不想那么麻烦，也可以直接写代码

<body>

<div id="progress">

<span><span>

</div>

<body>

使用插件

nprogress是一个jQuery插件，只有几K大小。使用起来非常方便和简单。先引入

<script src='nprogress.js'></script>

<link rel='stylesheet' href='nprogress.css'/>

控制显示，下面这两句代码，分别放到页面开头和网页加载完成事件里面即可。

NProgress.start();//开始加载进度条

NProgress.done();//停止显示进度条

控制进度条的速度

NProgress.set(0.0); // Sorta same as .start()

NProgress.set(0.4);

NProgress.set(1.0); // Sorta same as .done()

下载和dome

https://ricostacruz.com/nprogress/

微信扫描下方的二维码阅读本文

1 本网站名称：凯尤木江博客圈
2 本站永久网址：blog.kaynak.top
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END