`

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

分享到:
评论

相关推荐

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

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

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

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

    html5-bejeweled:HTML5 + CSS3 + JS电子游戏,“宝石迷阵”克隆

    该存储库基于一本已经很古老的书(来自2012年),并使用了旧版本的库(如Modernizr)及其不推荐使用的功能(如Modernizr.load()异步加载多个JS脚本并在成功执行后执行回调等)。 我不想分散自己的注意力,无法继续...

    基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据

    废话不多说,直接给大家贴代码了,代码附有注释,相信大家都能看懂的,有不明白的地方欢迎给我留言。 ...1.引入必要文件及上传input ... &lt;load file=__PUBLIC__/uploadify/uploadify.css&gt; &lt;input type=file class=

    mLoader:用于脚本和 CSS 的基于 JavaScript Promise 的小加载器

    一个用于异步加载 JS 和 CSS 的小 JS 库。 基于承诺。 用法 mLoader.load(, ); 其中file_list可以是: 远程服务器 url 作为字符串(不带参数的 HTTP POST 请求), 远程服务器 url 作为对象(带参数的 HTTP POST ...

    基于Vue 全家桶实现网易云音乐 WebApp

    基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等开发一款移动端音乐 WebApp,UI 界面参考了安卓版的网易云音乐、flex 布局适配常见移动端。通过学习开发一个 Vue 全家桶项目,让自己...

    基于Vue 实现一个中规中矩loading组件

    最终还是选择了css3+js来实现这个效果; gif的缺点挺多,至于为什么又排除了svg和canvas; 是因为css3+js可控性更强,不管是大小还是颜色,还是响应式(我的项目走的vh,vw)那套来适配; 可以借助打包插件,达到loading...

    react-reactlazyimgcomponent一个基于jquerylazyload结合react组件概念完成的图片懒加载小插件

    react-lazyimg-component 一个基于jquery.lazyload,结合 react 组件概念完成的图片懒加载小插件。支持全局配置,config 配置,个性定制等特性,还支持 velocity.js、animate.css动画库配置。

    毕业设计-仿京东商城(Vue+Node+Mysql)

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

    Three.js-bootstrap:简单Three.js引导程序

    Three.js引导程序更新为使用Three.js(r73)。 添加了一种在新窗口中将画布数据导出为PNG的方法。... WebGLDetect.js检测WebGL是否可用(可用且未禁用),然后使用LazyLoad.js加载大型Three.js库和项目代码。

    bChart:一个简单、干净且可重用的基于 d3 的图表库

    图表 bChart 是一个基于 D3 的图表库。...下载 bChart.js(或 bChart.min.js)和 bChart.css(或 bChart.min.css)。 加载脚本和 CSS &lt;!-- Load bChart.css --&gt; &lt;link href="/path/to/c3.css

    图库新版jQuery焦点图 JS代码

    tips[36] = '所谓“网站定位”就是实事求是的基于各种现状总结出一个对内容建设、功能规划、服务运营有帮助的指导纲领。'; tips[37] = '不要相信“天下设计一大抄”我们可以借鉴,但绝不能抄袭!'; tips[38] = '学...

    loadjs:适用于现代浏览器的小型异步加载程序依赖项管理器(899字节)

    它具有简单但功能强大的依赖关系管理系统,可让您并行获取JavaScript,CSS和图像文件,并在满足依赖关系后执行代码。 在使用LoadJS推荐的方式是包括的精缩源代码在&lt;HTML&gt;(可能在&lt;head&gt;标签),然后...

    easyjs:一个简单的javascript库

    easy.js 一个简洁的 JavaScript 库easy.js 是一个简洁易用的 JavaScript 库,包含了核心库和组件库。核心库有符合 W3C 标准的 CSS3 选择器,常用的 DOM 操作方法,增强的动画模块,支持 promise 模式的 ajax 模块...

    EaseJS:EaseJS 一个简洁的 JavaScript 库

    组件库是基于核心库开发的,目前为止有一些最常见的组件诸如 Drag(对话框)、Switchable(轮播)、Lazyload(延迟加载)、Dialog(对话框)等等,后续还会继续开发更多的常用组件。 网站 easy.js 为什么能提高你的开发效率...

    chrome-json-formatter:适用于Google Chrome的JSON格式化程序

    基于原始来源,如果您想创建自己的样式,则可以修改css\content.css ,然后使用一些CSS压缩器对其进行压缩,然后将其全部复制到js\content.js jfStyleEl.insertAdjacentHTML调用中js\content.js

    vue-filter-bar:Vue2组件,为基于URL的API查询提供可配置的过滤器栏

    Vue过滤器栏一个Vue2组件,为基于URL的API查询提供可配置的过滤器栏。 版本:r1.0.0安装由于这是一个vue.js组件。 是必需的。 &lt;!--Load vi-filter-bar stylesheet--&gt;&lt; link rel =" stylesheet " href =" ./...

    vue-jd

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

    vue-jingdong:这是关于京东店的Vue项目

    基于Vue2.0+Vuex+Axios+NodeJs+Express+MySQL实现京东移动web商城##前端架构页面结构(H5,CSS3,原生JS)框架(基于Vue脚手架:vue-cli)进行搭建数据请求处理框架(Axios)Vue-Router进行路由处理Vue-LazyLoad进行图片赖...

Global site tag (gtag.js) - Google Analytics