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

<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
});

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

Progress的更多相关文章

  1. HTML5 progress和meter控件

    在HTML5中,新增了progress和meter控件.progress控件为进度条控件,可表示任务的进度,如Windows系统中软件的安装.文件的复制等场景的进度.meter控件为计量条控件,表示某 ...

  2. 登陆Oracle,报oracle initializationg or shutdown in progress 错误提示

    前两天,登陆Oracle,发现登陆不上去了,报”oracle initializationg or shutdown in progress 错误提示” 错误. 然后就想着怎么去解决,首先自己到win ...

  3. The replication agent has not logged a progress message in 10 minutes.

    打开Replication Monitor,在Subscription Watch List Tab中,发现有大量的status= “Performance critical” 的黄色Warning, ...

  4. JavaScript----Js操控-HTML5 <progress> 标签

    Js操控----HTML5 <progress> 标签 简单模拟下下载进度跑条 <h4>加载进度</h4> <input type="button& ...

  5. SharePoint Configuration Wizard - Unable to upgrade SharePoint Products and Technologies because an upgrade is already in progress

    故障描述 当要运行SharePonit Products and Technologies Configuration Wizard的时候,出现了如下图所示的错误提示. 错误信息为: Unable t ...

  6. No edit session in the progress

    运行环境:开发环境:Windows7旗舰版64bit.VisualStudio2008 With SP1.ArcEngine10.0.NetFrameWork4.0.IIS7和C#开发语言. 问题描述 ...

  7. “ORA-01033:ORACLE initialization or shutdown in progress”错误的解决

    网页上显示以下错误信息: ORA-:ORACLE initialization or shutdown in progress 启动oracle数据库,有以下提示信息 Database mounted ...

  8. IOS 公共类-MyMBProgressUtil Progress显示

    IOS 公共类-MyMBProgressUtil Progress显示 此公共类用于显示提示框,对MBProgress的进一步封装.可以看下面的代码 接口: @interface MyMBProgre ...

  9. exception throw in progress runner thread_VS2015中SVN源代码无说明提交异常

    1-问题描述:通过SVN将代码变更提交服务器时,你可能会遇到以下异常:  exception throw in progress runner thread 2-解决办法: SVN代码源代码管理和TF ...

  10. Progress.js – 为页面上的任意对象创建进度条效果

    Progress.js 是一个 JavaScript 和 CSS3 的库,它帮助开发人员为网页上的每个对象创建和管理进度条效果.你可以设计自己的模板,进度条或者干脆定制. 您可以使用 Progress ...

随机推荐

  1. mogondb简介

    MongoDB是一款强大.灵活,且易扩展的通用型数据库,其包含以下设计特点 1.1易于使用 与关系型数据库不同的是,它没有table/rows/records,相反采用更为灵活的文档(document ...

  2. Spring课程 Spring入门篇 5-1 aop基本概念及特点

    概念: 1 什么是aop及实现方式 2 aop的基本概念 3 spring中的aop 1 什么是aop及实现方式 1.1 aop,面向切面编程,比如:唐僧取经需要经过81难,多一难少一难都不行.孙悟空 ...

  3. 【linux学习笔记】began,每次玩这个都特别着迷

    胡乱的安装,通过虚拟机,从DVD加载开始,当然网上有大段的装机教程,装了两个Linux发行版,一个是centos7,一个是ubuntu18.04. 分区那些事: 因为处于学习阶段,所以总是因为分区问题 ...

  4. JavaScript中文拼音排序函数

    要对很多设备根据名称排序,找了找没有找到特别适合的,然后就自己写了一个根据中文拼音首字母排序的方法. github: https://github.com/haboll/sort.git

  5. javascript对象(2)

    这个对象,不是那个对象.续更第二篇.. 昨天说了对象的基本概念以及创建,今天来说一下它的其他方法: 1.访问属性的两种方式:点语法.[]语法 var dog =new Object(); dog.na ...

  6. Java JSONArray的封装与解析

    package com.kigang.test; import net.sf.json.JSONArray; import net.sf.json.JSONObject; import java.ut ...

  7. apk接入google play邮箱登陆及充值注意事项

    unity3d 接入google play商店相关sdk,相关要求A.环境配置: 1.手机安装谷歌安装器 2.使用谷歌安装器安装Google 服务框架.Google Play服务.Google Pla ...

  8. Automapper 实现自动映射

    出于安全考虑,在后台与前台进行数据传输时,往往不会直接传输实体模型,而是使用Dto(Data transfer object 数据传输对象),这样在后台往前台传递数据时可以省略不必要的信息,只保留必要 ...

  9. wxpython 界面布局

    1.frame.Centre() 窗口出来后显示居中 2.textCtrl文本框style=wx.TE_PASSWORD密码, wx.TE_MULTILINE多行输入 3.单选按钮组 4.列表 5.图 ...

  10. python str、int、dict

    一.str print(dir(int))#['__add__', '__class__', '__contains__', '__delattr__', '__dir__', '__doc__', ...