因项目需要，用JQuery作了个进度条，原理很简单。
<html>
<head>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<style type="text/css">
#loading{
width:100px;
height:10px;
background:#A0DB0E;
position:fixed;
left:0;
top:0;
border:1px solid black;
}
#loading div{
width:1px;
height:10px;
background:#F1FF4D;
font-size:5px;
}
</style>
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
$('#loading div').animate({width:"85px"});
});
</script>
</head>
<body>
<div id="loading"><div><span>16%</span></div></div>
</body>
</html>
分享到：
相关推荐
jQuery，一个广泛使用的JavaScript库，提供了丰富的功能来简化DOM操作、事件处理和动画效果，其中包括实现进度条特效。本教程将详细介绍如何使用jQuery来创建自定义的进度条特效，并可以根据个人需求调整样式和风格...
本篇文章将详细讲解如何利用jQuery实现一个进度条插件，以及其在程序进度显示和AJAX文件上传中的应用。 首先，进度条插件的核心功能是动态展示一个过程的完成度，它可以是一个下载、上传、渲染或其他耗时操作的状态...
jQuery UI的进度条组件提供了两种模式：确定性和不确定性的进度条。确定性的进度条显示了一个具体的百分比，适合于知道任务完成度的情况；而不确定性进度条通常是一个连续移动的条纹，表示正在进行但无法预知完成...
在这个场景中，“进度条 jquery”意味着我们将讨论如何使用jQuery来实现或控制网页上的进度条效果。 在描述中提到的博文链接（已省略）可能包含了关于如何使用jQuery创建进度条的具体教程或示例。虽然没有具体的...
在本教程中，我们将探讨如何使用 jQuery 来创建一个动态进度条，这是一种常见的用户界面元素，可以用于显示加载状态、进度或评估等。 首先，我们需要引入 jQuery 库。在 `index.html` 文件中，你需要添加以下代码来...
"利用Ajax+Jquery实现异步进度条效果"这个主题正是围绕这一目标展开，它涉及到C#后端开发、.NET框架、Ajax技术以及Jquery库的前端应用。下面将详细阐述这些知识点。 首先，C#是一种面向对象的编程语言，广泛应用于...
【jQuery带进度条全屏图片轮播代码】是一款专为网页设计者打造的JavaScript特效，主要应用于创建具有视觉冲击力的全屏图片轮播展示。它借鉴了OPPO手机官网首页的设计理念，融合了进度条元素，使得用户体验更加流畅且...
"星球大战jQuery水平进度条特效"就是利用jQuery库创建的一种视觉上吸引人的用户体验元素。 这个特效的核心在于模拟星球大战电影中经典的激光剑（Lightsaber）效果。激光剑在电影中以其独特的颜色和动态效果成为了...
JQuery节点进度条代码插件，用来显示多少个节点，可用于审批流程图。
**jQuery UI 进度条插件详解** 在Web开发中，进度条是一个常见的交互元素，它能够直观地向用户展示任务的完成状态。基于jQuery UI的进度条插件，为开发者提供了一种简单且功能丰富的解决方案，使得创建具有动画效果...
本文将深入探讨如何使用jQuery库创建一个动态的进度条动画，同时显示实时的百分比。 首先，jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画效果和Ajax交互。在实现进度条动画时，我们主要利用...
**基于SVG的jQuery圆形进度条插件ProgressCircle详解** ProgressCircle.js是一款专为网页开发者设计的轻量级jQuery插件，其核心特点是利用 Scalable Vector Graphics (SVG) 技术来实现美观且高度自定义的圆形进度条...
【jQuery带进度条滚动图片轮播代码】是一个用于创建动态且具有用户交互性的图片轮播插件。这个插件的特点是结合了左右箭头按钮控制，以及标题和进度条的显示，为用户提供了一种视觉上吸引人且易于操作的图片浏览体验...
综上所述，“jQuery带进度条播放暂停按钮焦点图切换特效”是一个集成了多种Web开发技术的实例，包括jQuery交互、CSS动画、DOM操作和响应式设计。掌握这些知识点有助于开发者创建更丰富、更动态的网页交互效果。
汽车网站jquery带进度条焦点图是一款带进度条的焦点图片特效jquery插件，图片作成很大时看上去可以实现全屏的效果，进度条上还带有一个小图标跟随焦点滑动，不像普通的焦点图特效只是当前的焦点的样式与其他的不一样...
本教程将详细讲解如何使用jQuery库来模拟页面加载进度条。 首先，jQuery是一款广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作以及Ajax交互。jQuery的易用性和丰富的功能使其成为创建动态网页的强大...
jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条jquery 进度条...
本教程将详细讲解如何利用Spring和jQuery来实现文件上传过程中显示进度条的功能，提升用户的操作体验。 首先，我们需要理解文件上传的基本流程。当用户选择一个文件进行上传时，浏览器会创建一个XMLHttpRequest对象...
jQuery进度条插件是一种在网页中显示数据加载或任务完成进度的交互元素，它通过图形化的方式呈现数据，使得用户能够直观地了解操作的状态。在本案例中，“非常实用的jquery进度条”提供了用户友好的界面，允许用户...
在这个"jQuery步骤进度条控制代码"中，我们主要探讨的是如何利用jQuery来实现一个步骤进度条，该进度条允许用户进行上一步、下一步以及跳过步骤的操作，这在多步骤表单或流程引导中非常常见。 首先，步骤进度条是...