一、JS Code:

<script type="text/javascript">

var progressId = "ProgressBarID";

function setProgressBar(progress) {

if (progress) {

$("#" + progressId + " > div").css("width", String(progress) + "%");

$("#" + progressId + " > div").html(String(progress) + "%");

}

}

var i_ProgressBar = 0;

function doProgressBarLoading() {

if (i_ProgressBar > 100) {

alert("加载完毕?!!");

return;

}

if (i_ProgressBar <= 100) {

setTimeout("doProgressBarLoading()", 10);

setProgressBar(i_ProgressBar);

i_ProgressBar++;

}

}

function setProgressBarCss() {

$("#" + progressId + "").css({ "width": "300px", "height": "25px" });

$("#" + progressId + " > div").css({ "height": "25px", "background-color": "#e0e0e0", "text-align": "center" });

}

$(document).ready(function () {

setProgressBarCss();

doProgressBarLoading();

});

</script>

二、Html Code:

<div id="ProgressBarID">

<div>

</div>

</div>

jQuery实现简单的百分比进度条相关推荐

  1. php 进度条百分比算法,实例讲解Ajax实现简单带百分比进度条

    最近做项目遇到这样的需求要求当进行文件长传保存等操作时,能在页面显示一个带百分比的进度条,给用户一个好的交互体验,下面通过实例代码给大家介绍基于ajax实现带百分比进度条效果,需要的的朋友参考下吧,希 ...

  2. 8款效果精美的 jQuery 加载动画和进度条插件

    加载动画和进度条在网站和 Web 应用中的使用非常流行.虽然网速越来越快,但是我们的网站越来越复杂,同时用户对网站的使用体验的要求也越来越高.在内容加载缓慢的时候,使用时尚的加载动画和进度条告诉用户还 ...

  3. php进度条插件,分享8款优秀的 jQuery 加载动画和进度条插件_jquery

    加载动画和进度条在网站和 Web 应用中的使用非常流行.虽然网速越来越快,但是我们的网站越来越复杂,同时用户对网站的使用体验的要求也越来越高.在内容加载缓慢的时候,使用时尚的加载动画和进度条告诉用户还 ...

  4. ajax百分比加载特效,jQuery实现的简单百分比进度条效果示例

    本文实例讲述了jQuery实现的简单百分比进度条.分享给大家供大家参考,具体如下: 一.JS Code: var progressId = "ProgressBarID"; fun ...

  5. jquery和php上传文件进度条,jQuery实现文件上传进度条特效_jquery

    上传进度条通常是由前面jquery加后端了脚本器脚本来实现了,今天我们介绍的是一款基本php+jQuery实现文件上传进度条效果的例子,具体细节如下. 最近呢,一个项目做一个进度条的效果出来,这个之前 ...

  6. YCProgress自定义百分比进度条

    目录介绍 1.本库优势亮点 2.使用介绍 2.1 圆环百分比进度条 2.2 直线百分比进度条 2.3 仿杀毒类型百分比进度条 3.注意要点 4.效果展示 5.其他介绍 1.本库优势亮点 圆环百分比进度 ...

  7. 圆形百分比进度条效果

    一.前言 最近有点懈怠啊,没怎么整理发布博客.今天写篇文章和大家分享一个常用的效果,圆形百分比进度条.前段时间我有个页面需要该效果,就在网上看了下,实现方式有好几种,我找了一种比较好实现的给大家一步步 ...

  8. jQuery实现可拖动控制进度条

    <!DOCTYPE HTML> <html><head><meta charset="utf-8"><meta name=&q ...

  9. jquery文件上传插件|进度条

    jquery文件上传插件|进度条 一.Uploadify 官网:http://www.uploadify.com/ 下载地址:http://down.51cto.com/data/577863 详细参 ...

  10. java如何画百分比圆环_canvas绘制旋转的圆环百分比进度条

    作者:依然 |  时间:2015-05-29 |  阅读:122 canvas绘制旋转的圆环百分比进度条 从上一篇的文章使用HTML5 Canvas arc()绘制圆形/圆环 我们了解到了怎么使用ca ...

最新文章

  1. windows加载符号小计
  2. 错误消息 This computer doesn‘t have VT-X/AMD-v enabled
  3. Java开发热门前沿知识!成功从小公司跳槽进蚂蚁定级P6
  4. 软件测试要求太高,软件“故障门”频现 对软件测试提出更高要求
  5. Java面试技巧—如何自我介绍
  6. Linux(服务器编程):25---epoll复用技术实现统一处理信号事件源
  7. C#LeetCode刷题之#824-山羊拉丁文​​​​​​​(Goat Latin)
  8. IntelliJ Idea取消Could not autowire. No beans of 'xxxx' type found的错误提示
  9. 编译PBRT-v3源码
  10. SpringCloud微服务快速入坑
  11. python实现图片识别文字程序
  12. STM32制作FLASH字库
  13. 【软硬件基础】X86和X64
  14. es远程主机强迫关闭了一个现有的连接
  15. PyQt之计数器(QSpinBox)控件的常用方法
  16. x299服务器芯片组,【装机帮扶站】第770期:X79/X99/X299平台“高级”垃圾简析
  17. Android短视频SDK
  18. 陆奇:开源开发是更优越的开发方式
  19. 反编译小程序.wxapkg文件
  20. 正则表达式前瞻(?=)、后顾(?)、负前缀(?!)、负后顾(?!)

热门文章

  1. 哎,老了之display-box
  2. Nginx 从入门到放弃(三)
  3. JS对象、数组 及 数据类型 Symbol
  4. 《纽约邮报》手机客户端推送系统被黑 黑客发送抒情诗
  5. Windows 10的成功能让苹果学到点什么?
  6. JAVA爬虫Nutch、WebCollector的正则约束
  7. html table tr 动态加减行操作
  8. 4.Zabbix企业级分布式监控系统 --- 快速配置和使用
  9. 17.Mac Ctags 使用
  10. 2. 创建多网站和商店(Creating Multiple Websites and Stores)