<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>
分享到：
相关推荐
在IT界，用户体验是至关重要的，而加载loading进度条动画就是提升用户体验的一种有效方式。它在用户进行数据加载、文件传输或系统处理时提供视觉反馈，让用户知道程序正在运行并且有所进展，从而缓解用户的等待焦虑...
总结来说，"Loading网页加载进度条动画效果.zip"是一个结合了jQuery和CSS3技术的网页加载动画解决方案，它通过优雅的动画为用户提供了良好的等待体验，同时展示了JavaScript和CSS3在网页动态效果上的强大能力。...
【标题】：“13种CSS3网页加载进度条效果” 在网页设计中，加载进度条是一种常见的用户体验元素，它能够向用户展示数据加载的进度，缓解用户等待时的焦虑感。CSS3作为现代Web设计的强大工具，提供了丰富的样式和...
本文将深入探讨如何利用CSS3的animation属性制作出超酷的网页Loading加载进度条动画效果。 首先，我们需要了解CSS3的animation属性。CSS3的animation属性是一组属性的简写形式，包括`animation-name`、`animation-...
本资源“loading动画加载进度条效果.zip”显然提供了这样一种纯CSS3实现的解决方案。 首先，我们要理解CSS3的`animation`属性。CSS3动画允许开发者通过关键帧（keyframes）定义元素在一段时间内的变化，从而创建出...
本资源"加载进度条loading动态效果ppt模板.rar"是一个专门用于演示和学习如何在PowerPoint（PPT）中创建此类效果的工具包。 首先，"loading"是英文中的术语，代表“加载”或“正在处理”的意思，常用于表示程序或...
在本文中，我们将深入探讨如何使用jQuery库来创建一个名为`myProgress.js`的自定义加载loading动画进度条效果。进度条是用户界面中的一个重要元素，它可以为用户提供关于任务完成状态的实时反馈，特别是在处理耗时...
"loading进度条类素材"的标题暗示了这是一组与加载动画相关的图形资源，主要用于展示应用程序或网页内容加载的过程，给予用户反馈，让他们知道系统正在处理请求而不会感觉被忽视。这些素材通常为GIF格式，因为GIF...
标题“win8 metro loading进度条flash版”提及的是Windows 8 Metro风格的加载进度条，这是一种在Windows 8操作系统中采用的设计元素，特别是在Metro界面应用中常见。Metro设计语言是微软为Windows 8及后续版本引入的...
【标题】：“有loading进度条的幻灯片代码”指的是在展示幻灯片效果时，增加了一个加载进度条的功能。这种技术通常用于提高用户体验，让用户知道内容正在加载，并且可以预估加载完成的时间，增强等待过程的可接受性...
"波浪创意loading进度条声效ppt特效.rar" 是一个压缩包，其中包含了一种创新的加载进度条动画设计，特别适用于PowerPoint演示文稿。这个特效融合了视觉和听觉元素，旨在提升观众对内容加载过程的感知和耐心。 首先...
html js制作加载进度条.zip
总结来说，"loading进度条——文本框加载动画ppt模板.rar"为用户提供了方便的工具，帮助他们创建富有吸引力的加载动画，提升演示文稿的视觉效果，同时优化了用户在等待过程中的体验。了解加载动画和进度条的设计原则...
本项目“css3 animation实现的loading动画加载进度条效果.zip”专注于利用CSS3的动画（animation）特性来创建动态的加载进度条，这种效果在网页加载时常见，能提升用户体验，展示数据正在加载的过程。 加载进度条是...
这是一款使用纯CSS3制作的超酷圆形Loading加载进度条特效插件。该loading加载进度条特效有水平进度条和环状进度条两种，该特效在水平或圆形轨道上有一个小球不断运动来达到loading进度条效果。
这个项目“jQ带Loading进度条焦点图 jQuery带Loading进度条焦点图.zip”显然是一个实现此类功能的代码示例。下面我们将详细讲解其背后的原理和实现步骤。 首先，让我们了解焦点图的基本概念。焦点图，也称为轮播图...
在网页设计中，用户体验是至关重要的，而CSS3相册图片加载进度条效果就是一种提升用户体验的优秀实践。这种效果可以在图片加载时提供反馈，让用户知道页面正在处理内容，而不是出现空白或者静止不动，从而减少用户的...
这个html5 loading效果中共有13种不同风格效果的加载动画loading效果进度条,支持ajax loading。第一款是youtube风格loading效果，完成这个demo用到了html5 svg和css3技术。