<html>
<head>
<style type="text/css">
/*Loader
----------------------------------------------*/
#loader_container {
text-align:center;
position:absolute;
top:60%;
width:100%;
left: 0;
}
#loader {
font-family:Tahoma, Helvetica, sans;
font-size:11.5px;
color: #abc;
background-color:#000;
padding:10px 0 16px 0;
margin:0 auto;
display:block;
width:130px;
border:1px solid #abc;
text-align:left;
z-index:2;
}
#loader_bg {background-color: #abc;
position:relative;
top:8px;
left:8px;
height:7px;
width:113px;
font-size:1px}
#progress {
height:5px;
font-size:1px;
width:1px;
position:relative;
top:1px;
left:0px;
background-color: #fff;
}
</style>
<script type="text/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() {
onload=remove_loading();
this.clearInterval(t_id);
var targelem = document.getElementById('loader_container');
targelem.style.display='none';
targelem.style.visibility='hidden';
}
</script>
</head>
<body >
<div id="loader_container" onclick="this.style.display='none'" title="点击关闭">
<div id="loader">
<div align="center">文件正在上传中 ...</div>
<div id="loader_bg"><div id="progress"> </div></div>
</div>
</div>
<img src="http://www.2345.com/i/logo/234520101026expo.gif" />
</body>
</html>
分享到：
相关推荐
加载loading进度条的demo,亲测直接可用哦亲...
Loading网页加载进度条动画效果是一款基于jquery CSS3 animation属性实现的酷炫的Loading网页加载进度条动画效果。
loading动画加载进度条效果是一款纯css3 animation动画属性页面loading动画加载进度条效果。
基于jQuery实现的myProgress.js加载loading动画进度条效果基于jQuery实现的myProgress.js加载loading动画进度条效果
三款非常酷炫的网页Loading加载进度条动画效果。使用css3 animation技术制作而成。
13种CSS3网页加载进度条效果
html js制作加载进度条.zip
这是一款使用纯CSS3制作的超酷圆形Loading加载进度条特效插件。该loading加载进度条特效有水平进度条和环状进度条两种，该特效在水平或圆形轨道上有一个小球不断运动来达到loading进度条效果。
波浪渐渐加载满，波浪创意逐渐满圈loading进度条ppt特效动画，有好听的背景音乐。
css3 animation实现的loading动画加载进度条效果.zip
这个html5 loading效果中共有13种不同风格效果的加载动画loading效果进度条,支持ajax loading。第一款是youtube风格loading效果，完成这个demo用到了html5 svg和css3技术。
进度条动画ppt模板，加载到100%进入正式页面，loadingppt特效动画模板下载。
网页进度条能够更好的反应当前网页的加载进度情况，loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程。但是目前的浏览器并没有提供页面加载进度方面的接口，也就是说页面还无法准确返回页面实际加载...
CSS3相册图片加载进度条效果，加载图片过程中在页面顶部出现蓝色的进度条，右上角有不停转动的loading效果，可以点击按钮加载更多图片，兼容主流浏览器.rar
unity游戏场景资源加载进度条Loading Screens for Mad Level Manager ,5种预制进度条样式，自动计算加载时间，支持uGUI和NGUI,可定制强，并且有个等待中与玩家互动的功能，大家自己研究下。
Loading网页加载进度条动画效果是一款基于jquery+CSS3 animation属性实现的酷炫的Loading网页加载进度条动画效果。
圆点绕圈旋转加载动画，文本框加载进度条，loading加载ppt动画特效模板。
css3 iOS8风格loading加载进度条动画