css3实现loading效果 |
您所在的位置：网站首页 › loading进度条 › css3实现loading效果 |
css3实现loading效果
|
一个页面等图片资源全部加载完成，会需要很长时间，用户体验会很差，所以我们需要loading来掩盖这个漫长的过程！ emmm，定时器？写个定时器还要清除，万一造成内存泄露？定时器之间还会互相影响，呼呼呼那就不考虑了 那么就用css写一个~~ 语法： animation: name duration timing-function delay iteration-count direction;@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。 1、设置进度条起始宽度0%，3s之内宽度移动85%，为什么不设置100%呢？ 因为3s进度条就加载到100%，如果我们的页面却迟迟没有加载完成，那么完全影响用户体验，所以我们设置到85%就让进度条停了下来，然后页面加载完成之后隐藏进度条，实现以假乱真！ /* loading */ .loading { background: #000; position: absolute; z-index: 999; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; } .progress { position: relative; width: 200px; height: 8px; background: #fff; border-radius: 20px; margin-top: 20px; } .progress-bar { position: absolute; left: 0; top: 0; height: 8px; line-height: 20px; border-radius: 20px; background: #d7bb29; animation: animate-positive 3s; } @keyframes animate-positive { from {width:0px;} to {width:85%;} } @-webkit-keyframes animate-positive { from {width:0px;} to {width:85%;} }
2.js判断页面是否加载完成，使用一个document 的 Document.readyState 属性描述了文档的加载状态。complete / 完成文档和所有子资源已完成加载。表示 load状态的事件即将被触发 当document.readyState == "complete"，表示页面所有内容已被完全加载此时可以隐藏loading var loading = document.getElementById("loading"); if (document.readyState == "complete") { // 页面加载完毕 loading.style.display = "none"; }3.附上demo DOCTYPE html> loading /* loading */ .loading { background: #000; position: absolute; z-index: 999; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; } .progress { position: relative; width: 200px; height: 8px; background: #fff; border-radius: 20px; margin-top: 20px; } .progress-bar { position: absolute; left: 0; top: 0; height: 8px; line-height: 20px; border-radius: 20px; background: #d7bb29; animation: animate-positive 3s; } @keyframes animate-positive { from {width:0px;} to {width:85%;} } @-webkit-keyframes animate-positive { from {width:0px;} to {width:85%;} } var loading = document.getElementById("loading"); if (document.readyState == "complete") { // 页面加载完毕 // loading.style.display = "none"; }4.效果图如下，可根据自己需求修改样式，已经进度条进度时间，进度曲线等~~
|
【本文地址】
今日新闻 |
推荐新闻 |