jquery进度条代码，jquery easyui进度条实现代码_jquery进度条

当前位置：首页 > 脚本编程 > jquery > jquery进度条 > 正文

jquery进度条代码，jquery easyui进度条实现代码: 发布时间：2020-06-12编辑：脚本学堂

有关jquery进度条的实现代码，在jquery中结合easyui实现的进度条代码，jquery animate方法实现一个简单的jquery进度条效果，供大家学习参考。

jquery/jindutiao/ target=_blank class=infotextkey>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">
//jquery进度条： animate方法
$(function(){
$('#loading div').animate({width:"85px"});
});
</script>
</head>
<body>
<div id="loading"><div><span>16%</span></div></div>
</body>
</html>

附，jquery进度条代码中用到的css样式：

复制代码代码示例:

* {
margin: 0;
padding: 0;
}

.taskBoxLinks {
float: left;
width: 225px;
height: 7px;
font-size: 0;
line-height: 0;
background: #f2f2f2;
border: 1px solid #dedede;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
position: relative;
margin-top: 8px;
margin-right: 0px;
cursor: pointer;
}

.taskBoxLinks h3,.taskBoxLinks h4 {
position: absolute;
left: -1px;
top: -1px;
height: 7px;
font-size: 0;
line-height: 0;
width: 100%;
background: #a3d9f4;
border: 1px solid #187aab;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
z-index: 99;
}

.taskBoxLinks h4 {
border: 1px solid #91cdea;
background: #f5fafc;
z-index: 88;
}

.taskBox {
width: 360px;
margin: 40px auto;
color: #666;
}
</style>
以下是jquery进度条的容器，显示进度条的加载进度。
<div class="taskBox">
<div class="taskBoxLinks"><h3 id="cpuUsageWidth" style="width:60%;"></h3><h4></h4></div><span id="cpuUsage" >60%</span>
</div>

上一篇：jquery进度条代码二例，jquery拖动进度条实例代码
下一篇：jquery进度条代码模拟效果

与 jquery进度条代码，jquery easyui进度条实现代码有关的文章

本文标题：jquery进度条代码，jquery easyui进度条实现代码
本页链接：http://www.jb200.com/article/30924.html

浏览排行

栏目分类

热点文章

jquery进度条代码，jquery easyui进度条实现代码