温馨提示:这篇文章已超过512天没有更新,请注意相关的内容是否还可用!
分享一个网页头部加一个网页加载进度条,类似于本站网站顶部所使用的效果,随着鼠标滚动不断前进,看起来还是挺有意思的。其实制作很简单,只需要用JS监听网页加载进度即可。
效果如图:
$({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%后消失 } } });
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()
https://ricostacruz.com/nprogress/
还没有评论,来说两句吧...