H5 移动端进度条加载

最新推荐文章于 2025-06-12 16:17:23 发布

原创最新推荐文章于 2025-06-12 16:17:23 发布 · 3.2k 阅读

3 ·

CC 4.0 BY-SA版权

前端_js_案例专栏收录该内容

22 篇文章

订阅专栏

该博客展示了如何在H5移动端实现一个进度条加载效果。通过CSS样式定义了加载条的外观，并使用JavaScript模拟了资源加载的进度更新，通过调整加载条宽度和数字显示来动态展示加载状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>移动端进度条</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style>
			html {
			  font-size: 20px;
			}
			body {
			  font-size: 16px;
			  font-family: "微软雅黑";
			}
			@media only screen and (max-width: 320px) {    html { 
			        font-size: 42.7px !important; 
			    }} 
			@media only screen and (min-width: 321px) and (max-width: 360px) {    html { 
			        font-size: 48px !important; 
			    }} 
			@media only screen and (min-width: 361px) and (max-width: 375px) {    html { 
			        font-size: 50px !important; 
			    }} 
			@media only screen and (min-width: 376px) and (max-width: 384px) {    html { 
			        font-size: 52.1px !important; 
			    }} 
			@media only screen and (min-width: 385px) and (max-width: 414px) {    html { 
			        font-size: 55.2px !important; 
			    }} 
			@media only screen and (min-width: 415px) and (max-width: 480px) {    html { 
			        font-size: 64px !important; 
			    }} 
			@media only screen and (min-width: 481px) and (max-width: 540px) {    html { 
			        font-size: 72px !important; 
			    }}
			@media only screen and (min-width: 750px) {    html { 
			        font-size: 100px !important; 
			    }}
    
			.loading_fater{
				width: 4.14rem;
				height: 0.44rem;
				background: #391956;
				border: 3px solid #FFFFFF;
				box-shadow: 0 3px 7px 0 rgba(189,16,224,0.50);
				border-radius: 100px;
				text-align: center;
			}
			.loading{ 
				width: 0.14rem;
				height: 0.44rem;
				background: #FE6365;
				box-shadow: inset 0 0 4px 0 #470707;
				border-radius: 100px;
			}
			.loading_fater> span{
				color: white;
				text-align: center;
				position: absolute;
				top: 0.1rem;
				left: 2rem;
			}
			
		</style>
	</head>
	<body>
		
		<div class="loading_fater">
			<div class="loading"></div>
			<span><label class="bfb">0</label>%</span>
		</div>
		
		<script type="text/javascript"> 
			
			/**
			 * 由于js并不能获取下载所需资源包文件大小 
			 * 所以只能在页面个部位插入代码片段 更新进度条 以模拟资源下载（读取）进度
			 */
			
			
			updateLoading(20,500);
			
			//用延迟  模拟加载文件需要的时间
			setTimeout(function(){
				updateLoading(30,500);
			},1000)
			
			
			setTimeout(function(){
				updateLoading(60,500);
			},2000)
			
			
			setTimeout(function(){
				updateLoading(100,1000);
			},3000)
			
			var bfb = document.getElementsByClassName('bfb')[0];
			/**
			 * 更新进度条
			 * @param {Object} bfb_num ：更新进度条数字baifenbi （10）
			 * @param {Object} millisecond :动画执行毫秒数
			 */
			function updateLoading(bfb_num,millisecond){
				
				//$('.loading').animate({'width':bfb_num+"%"},millisecond); 
				document.getElementsByClassName('loading')[0].style.cssText = 'width: '+bfb_num+'%;transition-duration:'+millisecond+'s;'
				
				var load_Interval = setInterval(function(){
					if(bfb.innerHTML < bfb_num){
						bfb.innerHTML = parseInt(bfb.innerHTML)+1;
					}else{
						clearInterval(load_Interval);
					}
				},millisecond/bfb_num)
			}
			
		</script> 
	</body>
</html>