一、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);};
如果觉得《Web前端 | 进度条 | 动态进度条 | IOS进度条 | 仿IOS进度条》对你有帮助，请点赞、收藏，并留下你的观点哦！
