Web前端 | 进度条 | 动态进度条 | IOS进度条 | 仿IOS进度条
饶元章
一、Html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态进度条</title>
<link href="./Content/Site.css" rel="stylesheet"/>
</head>
<body onload="Load()">
<!-- loading - Start-->
<div id="load">
<div id="loading">
<div id="loadingText" class="loadingText">0 %</div>
<div class="loading">
<div id="loadingBar" class="loadingBar"></div>
</div>
</div>
</div>
<!-- loading - End -->
<div id="body">
<h3>主页要显示的内容</h3>
</div>
<script src="./Scripts/Layout.js"></script>
<script src="./Scripts/jquery-3.6.0.min.js"></script>
</body>
</html>二、Css代码
/* Others */
* { margin:0px; padding:0px;}
body { font: 15px "Microsoft YaHei", Arial, Helvetica, sans-serif; color: #555; background: #f1f1f1; line-height: 1.5; text-align:center; padding-top:0px; padding-bottom:0px;}
img { border:0px; display:block;}
ul, li { list-style:none;}
a { text-decoration:none; color:#ccc;}
a:hover { text-decoration:none; color:#ccc;}
#body{ display: none;}
/*loading*/
body #load{ width:100%;height:100%;}
body #loading{ width:60%; margin:600px auto 0px; }
.loadingText{ display:block; font-size:26px; font-weight:600; margin:0px auto; color:black; box-sizing:content-box;}
.loading{ height:5px; background-color:#e5e9eb; border-radius:0; box-shadow:none;margin-bottom:30px; overflow:visible;}
.loadingBar{ height:5px; background-color:#000000; position:relative; background-image:linear-gradient(to right,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55);}
@-webkit-keyframes animate-positive{ 0%{ width:0%;}}
@keyframes animate-positive{ 0% { width:0%;}}
/* #body */
#body h3{ padding-top: 400px;}三、jQuery代码
//动画加载事件
function Load() {
//初始化进度
var value = 0;
//初始化进度元素宽度
loadingBar.style.width = 0;
//加载计时器
var timer = setInterval(function () {
//判断当前进度
if (value >= 101) {
setTimeout(function () {
//隐藏动画
$("#load").hide();
//显示页面
$("#body").show();
}, 800);
//清除计时器
clearInterval(timer);
} else {
//修改进度元素宽度
loadingBar.style.width = value + "%";
//修改文本元素
loadingText.innerText = value + " %";
}
value++;
}, 40);
};
类似资料：