基于CSS+JS的load条 (转)

最新推荐文章于 2022-03-18 18:35:04 发布

fangyong2006

最新推荐文章于 2022-03-18 18:35:04 发布

阅读量82

点赞数

分类专栏： FY_JavaScript脚本文章标签： CSS JavaScript HTML ViewUI

FY_JavaScript脚本专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<HTML>

<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<TITLE>Loading</TITLE>
<STYLE TYPE="text/css">
#loader_container {LEFT:0;POSITION:absolute;TEXT-ALIGN:center;TOP:40%;WIDTH:100%;}
#loader    {BACKGROUND-COLOR:#fff;BORDER-BOTTOM:#5a667b 1px solid;BORDER-LEFT:#5a667b 1px solid;BORDER-RIGHT:#5a667b 1px solid;BORDER-TOP:#5a667b 1px solid;COLOR:#000;DISPLAY:block;FONT-FAMILY:Tahoma, Helvetica, sans;FONT-SIZE:11px;MARGIN:0 auto;PADDING:10px 0 16px;TEXT-ALIGN:left;WIDTH:130px;Z-INDEX:2;}
#loader_bg   {BACKGROUND-COLOR:#e4e7eb;FONT-SIZE:1px;HEIGHT:7px;LEFT:8px;POSITION:relative;TOP:8px;WIDTH:113px;}
#progress   {BACKGROUND-COLOR:#70940d;FONT-SIZE:1px;HEIGHT:5px;LEFT:0;POSITION:relative;TOP:1px;WIDTH:1px;}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
var t_id = setInterval(animate, 20);
var pos = 0;
var dir = 2;
var len = 0;
function animate()
{
  var elem = document.getElementById("progress");
  if (elem != null)
  {
   if (pos == 0)
   {
    len += dir;
   }
   if (len > 32 || pos > 79)
   {
    pos += dir;
   }
   if (pos > 79)
   {
    len -= dir;
   }
   if (pos > 79 && len == 0)
   {
    pos = 0;
   }
   elem.style.left = pos;
   elem.style.width = len;
  }
}

function remove_loading()
{
  this.clearInterval(t_id);
  var targelem = document.getElementById("loader_container");
  targelem.style.display = "none";
  targelem.style.visibility = "hidden";
}

</SCRIPT>

</HEAD>

<DIV ID="loader_container">
<DIV ID="loader">
  <DIV ALIGN="center">Loading ...</DIV>
  <DIV ID="loader_bg">
   <DIV ID="progress"></DIV>
  </DIV>
</DIV>
</DIV>

(这是网站的内容。load条会在加载较慢图片时显示，加载完毕自动隐藏。)

</BODY>

</HTML>

fangyong2006

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于CSS+JS的load条 (转)

&lt;HTML&gt;&lt;HEAD&gt;&lt;META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312"&gt;&lt;TITLE&gt;Loading&lt;/TITLE&gt;&lt;STYLE TYPE="text/css"&gt; #loader_con
复制链接

扫一扫

专栏目录