照网上的例子做了动态加载进度条的例子，用一张背景图+一张进度条的图片，通过
$("#id").css("width", width)设置进度条长度。
但是长度过短时会将右边的圆角遮住，于是把进度条的图片改成三张，左圆角，中间（长度变化），右圆角。mark一下
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
var progress_id = "loading";
function SetProgress(progress) {
if (progress != 0) {
$("#" + progress_id + " > " +".pro-left, .pro-right").css("display", "block");
var width = $("#" + progress_id).width() * progress / 100 - 14;
$("#" + progress_id + " > " +".pro-mid").css("width", width); //控制#loading div宽度
$("#" + progress_id + " > " +".pro-mid").html(String(progress) + "%"); //显示百分比
}
}
var i = 0;
function doProgress(pro) {
//alert(pro)
if (i > pro) {
$("#message").html("加载完毕！").fadeIn("slow");//加载完毕提示
return;
}
if (i <= pro) {
setTimeout("doProgress(" + pro + ")", 1);
SetProgress(i);
i++;
}
}
$(document).ready(function() {
doProgress(50)
});
</script>
<style type="text/css">
#center{
margin:0 auto;
width:244px;
}
#loading{
width:244px;
height:22px;
background:url(bak.png) no-repeat;
}
#loading .pro-left{
width:7px;
height:22px;
background:url(pro-left.png) no-repeat;
float:left;
display:none;
}
#loading .pro-right{
width:7px;
height:22px;
background:url(pro-right.png) no-repeat;
float:left;
display:none;
}
#loading .pro-mid{
width:0px;
height:22px;
background:url(pro-mid.png) repeat-x;
color:#fff;
text-align:center;
font-family:Tahoma;
font-size:18px;
float:left;
}
</style>
</head>
<div id="center">
<div id="loading">
<span class="pro-left"></span>
<span class="pro-mid"></span>
<span class="pro-right"></span>
</div>
</div>
分享到：
相关推荐
"jquery动态页面加载进度条"就是一种优化用户体验的工具，它通过在页面加载过程中展示一个直观的进度条，让用户知道页面正在加载并估计加载完成的时间，从而减少用户的等待焦虑感。这个插件基于JavaScript库jQuery...
通过结合使用这些CSS3特性，开发者可以创建出各种独特的加载动画和进度条样式。 进度条插件是网页中用来显示任务完成进度的组件，它们通常采用HTML、CSS和JavaScript实现。jQuery的插件如NProgress、jQuery UI ...
4. **数据绑定和动态更新**：进度条通常与后台任务相关联，如文件上传或数据加载。博客可能讲述了如何使用Ajax请求获取任务进度，并将这个进度实时更新到进度条上。 5. **动画效果**：jQuery提供了丰富的动画API，...
在本教程中，我们将探讨如何使用 jQuery 来创建一个动态进度条，这是一种常见的用户界面元素，可以用于显示加载状态、进度或评估等。 首先，我们需要引入 jQuery 库。在 `index.html` 文件中，你需要添加以下代码来...
【jQuery网页加载进度条动画特效】是一个利用JavaScript库jQuery和CSS3技术实现的网页加载效果。这个特效在用户等待网页完全加载时，提供一个可视化的进度条，展示当前页面加载的进度，以此提升用户体验，让用户知道...
本项目“JQ蘑菇街进度条动态效果”旨在利用jQuery来创建一个类似蘑菇街网站上的动态进度条效果。这个效果能够给用户带来更丰富的视觉体验，通常用于展示任务完成度、加载状态或者评分等场景。 首先，我们来详细解释...
同时整个网页顶部带有加载进度条 使用方法： 1、首先在你的网页中引入lanrenzhijia.css样式以及jQuery库和html5代码 2、将代码部分拷贝到你需要的网页中即可(主意保持路径正确) 3、网页图片路径保存在...
它的动画功能是通过 jQuery 的 `.animate()` 方法实现的，可以平滑地改变DOM元素的各种属性，如宽度、高度、透明度等，非常适合用来制作进度条的动态效果。 HTML5 则提供了一些新的标签和API，使得开发者能够创建更...
在本文中，我们将深入探讨如何使用jQuery（简称jq）库来实现一个动态的投票进度条。这个功能可以为在线投票活动提供实时的反馈，让用户了解当前的投票情况，并且允许自定义用户界面（UI）风格以适应不同的设计需求。...
1. **设计概念**：确定预加载动画的风格，比如旋转的圆环、填充的进度条或者动态的文字等。 2. **构建元素**：使用HTML创建预加载动画的基础结构，这可能是一个简单的div元素或一组SVG图形。 3. **应用CSS**：使用...
**jQuery nprogress.js** 是一个轻量级的JavaScript插件，专门用于在页面加载过程中为用户提供视觉反馈，显示当前网页的加载...通过理解和应用上述知识，你可以有效地利用这个插件为你的网站添加一个优雅的加载进度条。
总结来说，本文通过HTML、CSS和JavaScript配合jQuery，展示了一种简洁而有效的加载进度条提示效果的实现方法。这种方法不仅可以增强用户体验，还可以通过进度条的动画效果向用户展示页面加载的状态，从而提升用户...
通过分析提供的标签“jq进度条”、“实例”和“可进行演示”，我们可以推测这是一个具有实际操作示例的教程，旨在帮助开发者了解并应用jQuery进度条功能。 首先，我们要理解jQuery进度条的基本概念。进度条是一种...
2. **动画效果**：使用`.animate()`函数，根据进度数据动态改变`stroke-dashoffset`属性，从而模拟进度条填充的过程。 **五、CSS样式** 1. **基础样式**：为SVG元素设置基本样式，如颜色、边框宽度等。 2. **动画...
jQuery动态进度条自定义百分比插件是一种在网页中实现进度可视化效果的工具，它基于JavaScript库jQuery构建，主要用于提供一种交互式的用户体验，显示任务、数据加载或其他过程的完成程度。这种插件允许开发者自由...
在这个特定的案例中，我们增加了加载进度条的功能，以便在图片加载期间给用户提供反馈，提高用户体验。 **HTML5基础结构** HTML5是构建页面结构的基础。为了创建焦点图，我们需要定义一个容器来容纳所有的图片，...
在本文中，我们将深入探讨如何使用jQuery库来创建一个名为`myProgress.js`的自定义加载loading动画进度条效果。进度条是用户界面中的一个重要元素，它可以为用户提供关于任务完成状态的实时反馈，特别是在处理耗时...
本文将深入探讨如何使用jQuery库创建一个动态的进度条动画，同时显示实时的百分比。 首先，jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画效果和Ajax交互。在实现进度条动画时，我们主要利用...
因为我们无法通过任何方法获取整个页面的大小和当前加载了多少，所以想制作一个加载进度条的唯一办法就是模拟。那要怎么模拟呢？ 我们知道，页面是从上往下执行的，也就是说我们可以大致估算出在页面的某个位置加载...
因为我们无法通过任何方法获取整个页面的大小和当前加载了多少，所以想制作一个加载进度条的唯一办法就是模拟。那要怎么模拟呢？ 我们知道，页面是从上往下执行的，也就是说我们可以大致估算出在页面的某个位置加载...