首页 >探索
使用代码为网页顶部加上加载进度条
发布日期:2025-11-08 17:54:09
浏览次数:371
使用代码为网页顶部加上加载进度条

使用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头部插入一个元素,作为进度条,代码度条不想那么麻烦,为网也可以直接写代码

使用插件

nprogress是页顶一个jQuery插件 ,只有几K大小 。部加使用起来非常方便和简单。载进

先引入

控制显示 ,使用上加下面这两句代码,本尊科技代码度条分别放到页面开头和网页加载完成事件里面即可。为网

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:本站永久网址:https://labishaxin.com/

3:本站部分内容收集于互联网,如果有侵权内容  、部加请联系我们删除,载进不妥之处,使用上加敬请谅解

4:本站一切资源不代表本站立场 ,代码度条并不代表本站赞同其观点和对其真实性负责

5:本站一律禁止以任何方式发布或转载任何违法的为网相关信息 ,访客发现请向站长举报

6:本站资源大多存储在云盘,如发现链接失效 ,请联系我们我们会第一时间更新

上一篇:Xiuno如何实现非管理员或者版主不允许删除帖子
下一篇:Xiunobbs人机验证插件(极验证4.0接口)v1.0
相关文章