网页或文件加载Loading进度条效果之三_打开文件显示loading什么意思-优快云博客

本文链接：https://blog.youkuaiyun.com/wudibaobei8/article/details/2747584

本文介绍了一种使用HTML和JavaScript实现的网页或文件加载进度条效果。通过改变背景颜色和位置来模拟加载进度，同时文字颜色也会闪烁变化，增强用户体验。

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

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效|Linkweb.cn/Js|---网页或文件加载Loading进度条效果之四</title>

</HEAD>
<body style="background:black">
<div style="position:absolute;width:322;height:14;border:1 #707888 solid;overflow:hidden">
<div style="position:absolute;top:-1;left:0" id="pimg">
</div>
</div>
<div style="position:absolute;top:30;left:120;font-size:9pt;color:#f4f4f4" id="abc">
Loading.............
</div>
<script>
s=new Array();
s[0]="#050626";
s[1]="#0a0b44";
s[2]="#0f1165";
s[3]="#1a1d95";
s[4]="#1c1fa7";
s[5]="#1c20c8";
s[6]="#060cff";
s[7]="#2963f8";
function ls(){
   pimg.innerHTML="";
   for(i=0;i<9;i++){
   pimg.innerHTML+="<input style=/"width:15;height:10;border:0;background:"+s[i]+";margin:1/">";
   }
}

function rs(){
   pimg.innerHTML="";
   for(i=9;i>-1;i--){
   pimg.innerHTML+="<input style=/"width:15;height:10;border:0;background:"+s[i]+";margin:1/">";
   }
}

ls();
var g=0;sped=0;
function str(){
if(pimg.style.pixelLeft<350&&g==0){
if(sped==0){
   ls();
   sped=1;
   }
pimg.style.pixelLeft+=2;
setTimeout("str()",1);
return;
}
g=1;
if(pimg.style.pixelLeft>-200&&g==1){
if(sped==1){
   rs();
   sped=0;
   }
pimg.style.pixelLeft-=2;
setTimeout("str()",1);
return;
}
g=0;
str();
}