js 实现加载百分比效果
2024-10-07 22:49:53
效果：
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>加载效果</title>
</head>
<style>
.loading {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 999;
font-size: 20px;
background-color: #fff;
} .loading.active {
-webkit-animation: fadeAnim 0.3s forwards ease-in-out;
animation: fadeAnim 0.3s forwards ease-in-out;
} .load {
width: 100px;
height: 100px;
position: absolute;
text-align: center;
top: 40%;
left: 50%;
margin-left: -20px;
} .load-text {
color: #099607;
font-size: 40px;
margin-top: 108px;
display: inline-block;
} .load-cell1,
.load-cell2 {
width: 100%;
height: 100%;
border-radius: 100px;
-webkit-border-radius: 100px;
border: 3px solid #fff;
background-color: #099607;
top: 0;
left: 0;
opacity: 0.6;
position: absolute;
-webkit-animation: bounce 2.0s infinite ease-in-out;
animation: bounce 2.0s infinite ease-in-out;
} .load-cell2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
} @-webkit-keyframes fadeAnim {
from {
opacity: 1
} to {
opacity: 0
}
} @keyframes fadeAnim {
from {
opacity: 1
} to {
opacity: 0
}
} @-webkit-keyframes bounce { 0%,
100% {
-webkit-transform: scale(0.0)
} 50% {
-webkit-transform: scale(1.0)
}
} @keyframes bounce { 0%,
100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<body>
<div class="loading" id="Js_load">
<div class="load">
<div class="load-cell1"></div>
<div class="load-cell2"></div>
<span class="load-text j_loadtext"></span>
</div>
</div>
<script type="text/javascript">
(function(window, undefined) {
//loading
var loader = document.getElementById("Js_load"),
bar = loader.querySelector(".j_loadtext"),
num = 0,
time = 0,
state = true;
//加载完成
function loadOk() {
if (state) {
state = false;
bar.innerHTML = "100%";
loader.className = "loading active";//加到100%后，关闭加载效果
setTimeout(function() {
loader.style.display = "none";
}, 500);
}
}
var timer = setInterval(function() {
num = parseInt(num + Math.random() * 10, 10); time++;
if (num > 90) {
num = 90;
} else {
bar.innerHTML = num + "%";
}
if (time > 10) {
clearInterval(timer);
loadOk();
}
}, 1000); window.onload = function() { //页面加载完成后，关闭加载效果
loadOk();
}; })(window);
</script>
</body>
</html>
最新文章
- Javascript操作Cookie的脚本 — CookieHelper
- ExtJS4.2 根据数据库记录构建树形菜单
- 求n个数中的最大或最小k个数
- .NET中的消息队列
- centos 6.5 hadoop 2.3 初配置
- 常用Oracle分析函数详解 [http://www.cnblogs.com/benio/archive/2011/06/01/2066106.html]
- Java多线程Runnable与Callable区别与拓展
- Cocos动作执行时，同时执行完毕再进行下一步的方式
- PHP面向对象的小总结
- Java注解--笔记
- Determine YARN and MapReduce Memory Configuration Settings
- 黄聪：C#使用Application.Restart重启程序出错解决办法
- 福大软工 · 第八次作业（课堂实战）- 项目UML设计（团队）
- Mac osx 启用和关闭root用户
- XML随笔：语法快速入门及当下流行的RSS简析
- 如何在HTML 5中拖动光标图标？
- 生成CFree 5.0 注册码
- EntityFramework6.1自动生成复数名称数据表的问题
- android开发问题 Failed to pull selection 菜鸟记录
- Could not contact Selenium Server; have you started it on 'localhost:4444'