`

基于CSS+JS的load条 (转)

阅读更多

<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>

<BODY ONLOAD="remove_loading();">

<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>

分享到:
评论

相关推荐

    使用html+css+JavaScript实现中国象棋的对弈,并给出代码

    - `&lt;script type="text/javascript" src="main.js"&gt;&lt;/script&gt;` 引入JavaScript脚本。 - `&lt;body&gt;` 包含页面的可见内容。 - `&lt;div id="board"&gt;` 是棋盘的容器。 - `&lt;table id="chess-table"&gt;` 创建棋盘网格。 - `...

    基于nodejs+mysql实现的仿京东商城项目

    页面结构(H5,CSS3,原生JS) 框架(基于Vue脚手架:vue-cli)进行搭建 数据请求处理框架(Axios) Vue-Router进行路由处理 Vue-LazyLoad进行图片赖加载 服务端 选用NodeJs进行后台开发 Express中间件进行服务的配置,路由、...

    仿京东BOE网页动态网页效果,纯css+html+JavaScript

    本项目是基于“京东BOE”网页的动态效果仿制,主要采用的技术栈为CSS、HTML和JavaScript,可能还涉及到jQuery库。这意味着我们将探讨如何使用这些前端技术来实现类似京东BOE页面的交互式用户体验。 【HTML】 HTML...

    基于jQuery+bootstrap的评论回复代码

    Bootstrap是由Twitter开发的开源前端框架,它提供了响应式布局、移动设备优先的Web设计方法,包含一系列预先设计的CSS和JavaScript组件,如导航栏、按钮、表单、模态框等,帮助开发者快速构建美观且适应各种屏幕尺寸...

    unigui_调用外部js与css

    本主题聚焦于如何在Unigui项目中调用外部JavaScript(js)和样式表(css)资源,这对于扩展功能、引入第三方库或者实现自定义样式是必要的。 首先,理解Unigui的基础架构是关键。Unigui基于Vue.js,Vue.js是一个...

    基于js+html5实现的图片倒影效果源码.zip

    本示例"基于js+html5实现的图片倒影效果源码"提供了一种方法,利用JavaScript和HTML5的强大功能来创建图片的倒影效果。这个压缩包包含了一个实现此功能的代码文件,文件名为"132686907545963956",可能是一个HTML...

    基于nodejs+mysql实现的仿京东商城项目.zip

    基于Vue2.0+Vuex+Axios+NodeJs+Express+MySQL实现京东移动web商城经过一个多月的总算完成了第一个版本前端建筑页面结构(H5,CSS3, BrassJS)框架(基于Vue脚手架:vue-cli)进行搭建数据请求处理框架(axios)Vue-Router...

    前端开源库-ember-load-css

    ember-load-css是基于Ember.js框架的一个CLI(命令行界面)包装器,它引入了loadcss库,旨在优化CSS的异步加载和管理。 **描述详解:** 描述中的“ember load css”指的是该库的核心功能,即在Ember应用中加载CSS...

    基于Layui+form组件的省市区级联下拉框选择.zip

    《基于Layui+Form组件实现省市区级联下拉框选择详解》 在Web开发中,用户界面的交互性和易用性至关重要。一个常见的需求是实现省市区级联选择,用户可以根据地理位置逐级选择所在区域。Layui,一个优秀的前端框架,...

    Javascript load Page,load css,load js实现代码

    基于标题和提供的部分实现代码,下面详细阐述了使用JavaScript动态加载页面、CSS和JavaScript文件的知识点。 ### 动态加载页面 在Web开发中,有时需要从服务器动态加载HTML内容到当前页面中,而不必重新加载整个...

    jQuery基于css3制作万圣节礼物盒动画加载特效源码.zip

    综上所述,"jQuery基于css3制作万圣节礼物盒动画加载特效源码.zip"是一个结合了jQuery的便利性和CSS3的强大动画功能的示例,它展示了如何通过编程技巧实现引人入胜的网页加载体验,尤其是在节日主题背景下。...

    lazyload.js图片延迟加载(懒加载)插件

    "lazyload.js图片延迟加载(懒加载)插件" 是一个JavaScript库,主要用于优化网页性能,特别是那些包含大量图片的页面。它实现了“懒加载”技术,即图片不会在页面加载时立即加载,而是在用户滚动到图片即将出现在...

    Tomcat无法加载css和js等静态资源文件的解决思路

    在开发和部署基于Java的Web应用时,Tomcat作为常用的Servlet容器,有时会出现无法加载CSS、JavaScript等静态资源的问题。这种情况通常会导致网页样式混乱、交互失效,严重影响用户体验。以下是一些针对这个问题的...

    jQuery基于CSS3制作的文字碎片化loading加载动画特效源码.zip

    而"132686862965160238"可能是一个CSS或JS文件,包含了具体的实现逻辑。在实际应用时,需要将这个文件解压并引入到项目中,同时确保页面已经正确引入了jQuery库。 为了使用这个特效,开发者需要在HTML中设置一个...

    ThinkPHP模版中导入CSS和JS文件的方法

    在使用load标签时,只需要指定资源文件的相对路径即可,ThinkPHP会自动识别是CSS还是JS文件,并将正确的文件链接到页面中。 掌握上述标签的使用方法后,我们再来看看一些最佳实践。在模板设计时,建议将CSS和JS文件...

    一个基于C#+Ajax 实现的PostBack Async Callback 程序例子代码

    3. `.js`脚本文件:可能包含JavaScript代码,用于处理客户端的Ajax请求和响应,例如,使用`XMLHttpRequest`对象或jQuery的`$.ajax()`方法来发送异步请求,并更新DOM元素以显示服务器返回的数据。 4. `.css`样式文件...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    媒体查询 CSS媒体查询允许开发者基于浏览网站的设备的特性来应用不同的样式申明,最常用的特性是视口宽度。 GCF 谷歌内嵌浏览器框架, 使用此插件,用户可以通过Internet Explorer的用户界面,以Chrome内核的渲染方式...

Global site tag (gtag.js) - Google Analytics