使用代码为网页顶部加上加载进度条
使用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/
内容看完了
© 版权声明
请登录后发表评论
注册