给你的网站顶部加上加载进度条显示代码-彩豆博客

Turn your face to the sun and the shadows fall behind you.

永远面向阳光，这样你就看不见阴影了

概述简介

网页头部加一个网页加载进度条，看起来还是挺有意思的。其实制作很简单，只需要用JS监听网页加载进度即可。

截图预览

使用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%后消失 
        } 
    } 
});
//彩豆博客
$({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%后消失 
        } 
    } 
});
//彩豆博客
$({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 
        } 
}
/* 彩豆博客 */
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 
        } 
}
/* 彩豆博客 */
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>
<!--彩豆博客-->
<body> 
        <div id="progress"> 
                <span><span> 
        </div> 
<body>
<!--彩豆博客-->
<body> 
        <div id="progress"> 
                <span><span> 
        </div> 
<body>
<!--彩豆博客-->

使用插件

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


<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>
<!--彩豆博客-->
<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>
<!--彩豆博客-->
<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>
<!--彩豆博客-->

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


NProgress.start();//开始加载进度条
NProgress.done();//停止显示进度条
//彩豆博客
NProgress.start();//开始加载进度条
NProgress.done();//停止显示进度条
//彩豆博客
NProgress.start();//开始加载进度条
NProgress.done();//停止显示进度条
//彩豆博客

控制进度条的速度


NProgress.set(0.0);     // Sorta same as .start()
NProgress.set(0.4);    //彩豆博客
NProgress.set(1.0);     // Sorta same as .done()
NProgress.set(0.0);     // Sorta same as .start()
NProgress.set(0.4);    //彩豆博客
NProgress.set(1.0);     // Sorta same as .done()
NProgress.set(0.0);     // Sorta same as .start()
NProgress.set(0.4);    //彩豆博客
NProgress.set(1.0);     // Sorta same as .done()

下载和dome

此处内容已隐藏，请评论后刷新页面查看.

------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。

版权声明 1 本网站名称：彩豆博客
2 本站永久网址：https://www.521cd.cn
3本站代码模板仅供学习交流使用请勿商业运营,严禁使用彩豆博客上的模板&源码从事违法,侵权等任何非法活动！
4 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ931106824进行删除处理。
5 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
6 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
7 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END