JavaScript 常用进度条
1. 通过加载状态事件制作进度条:
知识点:
document.onreadystatechange //页面加载状态改变时的事件
document.readyState //返回当前文档的状态
uninitialized - 还未开始载入
loading - 载入中
interactive - 已加载,文档与用户可以开始交互
complete - 载入完成
document.onreadystatechange = function () {
console.log(document.readyState);
}
查看网页控制台,可以看出,已经返回当前文档的状态:
常见的加载进度条,如果不需要显示加载加载进度百分比,那么,直接执行一个进度条动画消失的任务即可:
document.onreadystatechange = function () {
if(document.readyState === "complete"){
//....要执行的任务,比如进度条动画结束fadeOut:
$('.loading').fadeOut();
}
}
推荐一个一不小心就会沉迷在里面的网站:https://loading.io/ 可在这里挑选进度条小动画,还有纯html+css写成的进度条动画。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 数据库服务器 SQL Server 版本升级公告
· 程序员常用高效实用工具推荐,办公效率提升利器!
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)