网页头部加一个网页加载进度条,看起来还是挺有意思的。其实制作很简单,只需要用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
- NProgress: slim progress bars in JavaScript (ricostacruz.com)
- GitHub – rstacruz/nprogress: For slim progress bars like on YouTube, Medium, etc
注:以上两种下载方式都可以,任选其一。
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
暂无评论内容