这个标签用来表示进度,常用来表示下载的进度。

<progress value="22" max="100"></progress>

  默认的样式就是这样,这个样式是可以修改的。

value:当前值

max:最大值

当前值/最大值=当前的比例(就是进度了)

一个上传显示进度的小案例:   我这里用的是表单的异步上传    文件上传---利用表单提交

  #myProgress
{
background: ghostwhite;
width: 200px;
height: 30px;
-webkit-appearance: none;
}
::-ms-fill //针对不同的浏览器做的处理
{
background: dodgerblue;
}
::-moz-progress-bar
{
background: dodgerblue;
}
::-webkit-progress-bar //全部的(整个进度条)
{
background: ghostwhite;
}
::-webkit-progress-value //已完成的样式
{
background: dodgerblue;
}

HTML:

JS:   一些参数的解释在上面说的那篇文章里面有解释。

  $("#myform").ajaxSubmit({
beforeSubmit: function (formData, jqForm, options) { //开始之前
$("#myProgress").show();
$("#per").show();
}, uploadProgress: function (event, position, total, percentComplete) { //显示进度的
$("#myProgress").val(percentComplete);
$("#per").text(percentComplete + "%");
},
success: function (data) {
$("#myProgress").hide();
$("#per").hide();
},
error: function (data, status, e) {
$("#myProgress").hide();
$("#per").hide();
NewAlertBox('ERROR', '上传失败!', 2000);
},
url: "/tool/upload_ajax.ashx",
type: "post",
dataType: "json",
timeout: 60000
});

效果:(这是我上传的过程中截的图)

最新文章

  1. 【强烈推荐】如何给TortoiseGit 配置密钥?
  2. gcc编译的四个阶段:预处理,编译,汇编,链接
  3. Is WPFdead
  4. kafka常用操作命令
  5. 使用git提交github代码
  6. 利用dsniff的tcpkill杀TCP连接
  7. return的用法
  8. db2数据库中查找数据库表
  9. 完美逆向百度手机助手5.0底部菜单栏 - Android Tabhost 点击动画
  10. Httpservlet cannot be resolved to a type
  11. GDI+ Tutorial for Beginners
  12. python数据分析入门学习笔记
  13. Linux系统Shell脚本编程
  14. centos7安装notepadqq
  15. ansible-host file
  16. 配置GitHub的SSH key
  17. MS SQL作业Schedule的限制注意事项
  18. Android笔记(五):广播接收者(Broadcast Receiver)
  19. 006-docker-安装-nginx
  20. Java&amp; Vector与ArrayList区别

热门文章

  1. CentOS 下 安装 JDK8
  2. Composite Design Pattern in Java--转
  3. Flask 框架理解(一)
  4. ie8点击焦点有虚线框兼容问题
  5. html结构内容拾忆
  6. 从零开始的全栈工程师——html篇1.2
  7. asp: suggest ajax
  8. Python基础 数据类型 (字符串、列表、字典、元组、集合、堆、栈、树)
  9. JS文本中间显示省略号
  10. maven项目的创建