HTML5 progress进度条详解
HTML5 progress 元素简介
progress是HTML5的一个新元素,表示定义一个进度条,用途很广泛,可以用在文件上传的进度显示,文件下载的进度显示,也可以作为一种loading的加载状态条使用。
html5 progress进度条语法
<progress value= '70' max= '100' ></progress>
|
点击这里查看html5 progress进度条的样子。
html5 progress 属性
progress max
max属性表示进度条的进度最大值,如果有此值,必须是大于0的有效浮点数。max的默认值是1.
progress value
value属性表示进度条完成的进度之,value值的范围为0~max之间。如果没有设置max属性,那么value属性值的范围要在0~1之间。
如果没有value值,那么完成进度是不确定的。这时候表示任务正在进行中,但不知道多长时间可以完成。这时候的progress在webkit浏览器中我们可以用作loading来使用,表示正在页面加载中,或者ajax请求后台数据中。
上图截自chrome浏览器。
没有设置value值的progress就像一个加载中loading,中间的进度块来回游荡。
没有value的progress在window7下的模样如下图:
确实有点丑,不过是继承了windows的典型风格。
html5 progress兼容性
progress在IE10+浏览器都支持
html5 progress 进度效果展示
progress动画效果模拟代码如下:
<progress value= "0" max= "100" >您的浏览器不支持progress元素</progress>
<br/><br/>
<input type= "button" value= "开始" onclick= "goprogress()" />
<script>
function goprogress(){
var pro=document.getElementsByTagName( "progress" )[0];
gotoend(pro,0);
}
function gotoend(pro,value){
var value=value+1;
pro.value=value;
if (value<100) {
setTimeout( function (){gotoend(pro, value);},20)
} else {
setTimeout( function (){alert( "任务完成" )},20);
}
}
</script>
|
点击这里查看progress动画模拟。
html5 progress相关样式设置
我们以实现一个progress的自定义样式为例子,来讲述progress有哪些样式可以供我们设置。
我们要把progress改变成上面这种模样。
代码如下:
<progress value= "20" class= "mypro" max= "100" >
您的浏览器不支持progress元素
</progress>
.mypro{
background:orange;
border:1px solid red;
border:2px solid #000;
width:300px;
height:50px;
-webkit-appearance: none;
}
::-ms-fill{
background:deeppink;
}
::-moz-progress-bar{
background:deeppink;
}
::-webkit-progress-bar{
background:orange;
}
::-webkit-progress-value{
background:deeppink;
}
|
progress可以设置width,height,border等常用属性。
对于IE10+,firefox浏览器,可以用background设置进度条的背景色。
对于webkit浏览器,使用::-webkit-progress-bar设置进度条的背景色。
对于IE10+,用::-ms-fill设置进度条完成进度的背景色。
对于firefox,用::-moz-progress-bar设置进度条完成进度的背景色。
对于webkit浏览器,使用::-webkit-progress-value设置进度条完成进度的背景色。
注意:::-webkit-progress-bar设置的是进度条的背景色,而::-moz-progres-bar设置的是进度条完成进度的背景色,正好是反着的。
而且对于webkit浏览器,在IOS上要用-wekbit-appearance:none来清空progress的默认样式,才能让背景色,进度颜色起作用。
点击这里,查看自定义progress进度条样式。
html5 progress结语
我们可以在ajax2上传文件中,upload.onprogress事件回调中使用progress可以很方便的显示文件上传的进度。也可以在FileReader预览图片中使用的onprogress事件中使用progress元素显示图片读取的进度。
HTML5 progress进度条详解相关推荐
- html进度条实现原理,HTML5 progress进度条详解
HTML5 progress 元素简介 progress是HTML5的一个新元素,表示定义一个进度条,用途很广泛,可以用在文件上传的进度显示,文件下载的进度显示,也可以作为一种loading的加载状态 ...
- 微信小程序进度条详解 progress 自定圆形进度条
也许你迷茫,但是我想说,在你迷茫的同时,保持本心,过好今天就好. 在微信小程序开发中,progress用来实现水平进度条效果 1 基本使用 <progress percent="80& ...
- 两种CSS3圆环进度条详解
晚上睡觉之前,我抽了1个多小时,研究了一下圆环进度条,结合从网上查阅的资料,我终于掌握了两种圆环的生成方法. 这次的效果就是单纯的CSS3效果,也没有写具体的JS,等以后有时间在好好整理一下吧~. 第 ...
- html 环形进度条,详解利用canvas实现环形进度条的方法
前提:有时候在项目中会有用到进度条的情况,使用css3也可以实现,但是对于性能不好的设备,或者网络不好的情况下,卡顿现象非常明显,避免出现不流畅的尴尬情况,所以记录一下,使用canvas来实现的方法. ...
- Element el-progress 进度条详解
点此查看全部文字教程.视频教程.源代码 本文目录 1. 前言 2. 基本用法 3. 调整颜色 4. 自定义文字内容 5. 百分值在内部展示,并调整高度 6. 环形进度条 7. 仪表盘进度条 8. 小结 ...
- pdf html5 阅读进度,HTML5的进度条progress元素
原标题:HTML5的进度条progress元素 progress元素属于HTML5新元素,指进度条.IE10+以及其他靠谱浏览器都支持. 体验一下效果: 在html里写入 查看浏览器效果:不同浏览器下 ...
- h5动画 php,HTML_多视角3D逼真HTML5水波动画 ,html5+css3进度条倒计时动画特效 - phpStudy...
多视角3D逼真HTML5水波动画 html5+css3进度条倒计时动画特效这个作品在今天上网找网络资源的时候无意中发现的,看到效果非常棒并且很实用,就第一时间把它整理出来与大家分享了,主要用到了htm ...
- 微信小程序进度条样式_微信小程序组件progress进度条解读和分析
progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行. progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pr ...
- 微信小程序组件解读和分析:六、progress进度条
progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行. progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pr ...
- HTML5本地存储使用详解
HTML5本地存储使用详解 前言 随着Web应用的发展,需要在用户本地浏览器上存储更多的应用数据,传统的cookie存储的方案已经不能满足发展的需求,而使用服务器端存储的方案则是一种无奈的选择.HTM ...
最新文章
- R语言_基本数据管理
- 因女朋友的一个建议,这位程序员创立仅 551 天公司就被 10 亿美元收购了
- mysql 5.6 cmake 安装_Cmake MySQL5.6 编译安装
- 数据表操作(DQL)
- 【脚本整理】docker-compose 部署prometheus + grafana
- C# 枚举类型在switch case语句中的使用
- 十年Java路,和大家来谈谈系统架构
- SAP UI5 初学者教程之十五 - 对话框和 Fragments 的使用方式试读版
- java反射 pdf_java反射学习笔记整理.pdf
- 如何使用「番茄法」高效的写算法题?
- 有序数组中插入元素依然保持有序
- 【OpenCV】基本数据类型
- 5.PSR-7: HTTP message interfaces
- 2011年-2019年华东地区产业发展、人口以及平均工资简析
- 《全民学乒乓》学习笔记
- [No0000134]C#中的委托,匿名方法和Lambda表达式
- CF896C Willem, Chtholly and Seniorious(珂朵莉树)
- 昨天学了js的控制css样式,自己做了个算卦小程序
- 使用restTemplate启动报错:Field restTemplate in com.demo.service.OrderToMemberService required a bean of ty
- 谷歌地图JavaScript API第3版 地理编码服务
热门文章
- 【ARTS】01_07_左耳听风-20181224~1230
- mce: [Hardware Error]: Machine check events logged
- WordPress企业主题:企业一号
- 年产4000吨果味奶糖生产车间工艺设计
- 移动机器人定位方法概述
- MySQL之按日期查询表数据
- 校长办公室管理系统c语言,【锦城故事】学软硬结合理论做智慧超群系统是锦城电子的必经之路...
- 有一种神奇的性格叫——INTJ
- Android开机速度优化
- Attention Mechanisms in Computer Vision: A Survey(四)