一、progress元素基本了解

1.基本知识

progress元素属于HTML5家族,指进度条。IE10+以及其他靠谱浏览器都支持。

注释:Internet Explorer 9 以及更早的版本不支持 <progress> 标签。

<progress> 标签标示任务的进度(进程)

2.基本属性

max, value, position, 以及labels.

(1)max指最大值。若缺省,进度值范围从0.0~1.0,如果设置成max=100, 则进度值范围从0~100.
(2)value就是值了,若max=100, value=50则进度正好一半。value属性的存在与否决定了progress进度条是否具有确定性。

比方说<progress></progress>没有value,是不确定的,因此IE10浏览器下其长相是个无限循环的虚点动画;

但是,一旦有了value属性(即使无值),如<progress value></progress>, 也被认为是确定的,

(3)position是只读属性,当前进度的位置,就是value / max的值。如果进度条不确定,则值为-1.
(4)labels也是只读属性,得到的是指向该progress元素的label元素们。例如document.querySelector("progress").labels,返回的就是HTMLCollection。

二、progress元素兼容性处理示例

<p class="progressbar"><progress max="100" value="10"><ie style="width:10%;"></ie></progress></p>
样式:progress {display: inline-block;width:100%;height: 5px;border-radius: 5px;overflow: hidden;float: left;} 
/*ie6-ie9*/
progress ie {display:block;height: 100%;background: #ff8a00; } 
progress::-moz-progress-bar { background: #ff8a00; } 
progress::-webkit-progress-bar { background: #e5e5e5; } 
progress::-webkit-progress-value { background: #ff8a00; }

详解HTML5中的进度条progress元素简介及兼容性处理的更多相关文章

  1. 详解HTML5中rel属性的prefetch预加载功能使用

    在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是: 利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率 ...

  2. video详解 HTML5中的视频:

    一.video 视频的方法.属性.事件详解 方法:play() 播放  pause() 暂停  属性:currentTime播放到当前的时间   duration视频的总时长 事件:ended 播放完 ...

  3. 详解HTML5中的<aside>元素与<article>元素

    <aside>元素HTML<aside>元素表示一个页面的一部分, 它的内容跟这个页面的其它内容的关联性不强,或者是没有关联,单独存在.<aside>元素通常显示成 ...

  4. 详解 HTML5 中的 WebSocket 及实例代码-做弹幕

    原文链接:http://www.php.cn/html5-tutorial-363345.html

  5. 简直要逆天!超炫的 HTML5 粒子效果进度条

    我喜欢粒子效果作品,特别是那些能够应用于实际的,例如这个由 Jack Rugile 基于 HTML5 Cavnas 编写的进度条效果.看着这么炫的 Loading 效果,即使让我多等一会也无妨:)你呢 ...

  6. html5 svg 圆形进度条

    html5 svg 圆形进度条 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  7. [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)

    人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...

  8. 如何在UIAlertView中显示进度条

    今天这个问题是,在一个iPhone程序中,我要在后台做大量的数据处理,希望在界面上显示一个进度条(Progress Bar)使得用户了解处理进度.这个进度条应该是在一个模态的窗口中,使界 今天这个问题 ...

  9. 深入详解SQL中的Null

    深入详解SQL中的Null NULL 在计算机和编程世界中表示的是未知,不确定.虽然中文翻译为 “空”, 但此空(null)非彼空(empty). Null表示的是一种未知状态,未来状态,比如小明兜里 ...

随机推荐

  1. CSS浮动并清除浮动(造成的影响)

    一.浮动 CSS浮动    CSS float浮动的深入研究.详解及拓展(一)    CSS浮动属性Float详解 块级元素独占一行 块级元素,在页面中独占一行,自上而下排列,也就是传说中的流. 可以 ...

  2. Oracle基础之分析表

    analyze table tablename compute statistics; analyze index indexname compute statistics; (analyze 不会重 ...

  3. 根据viewport的size自动调整fontsize大小

    现在的网站必须要考虑mobile上访问的友好性,bootstrap作为mobile first的前端框架得到很多应用,它通过默认就使用.col-xs-xx定义的width,同时加上@media(min ...

  4. C# 使用 Invoke 实现函数的白盒 UT 测试

    公有方法可以直接调用,但是一些非公开的方法,在覆盖率测试的时候也需要覆盖,可以使用 Invoke 来调用. 调用方法如下,其中 this 可以改为被调用的方法所属的类名,通过 BindingFlags ...

  5. 【Leetcode】【Medium】Divide Two Integers

    Divide two integers without using multiplication, division and mod operator. If it is overflow, retu ...

  6. 105 + 106. Construct Binary Tree from Preorder and Inorder Traversal (building trees)

    Given preorder and inorder traversal of a tree, construct the binary tree. Note: You may assume that ...

  7. ClipboardJS 实现JS复制到剪切板

    根据官方文档的说法这个支持IE9+以及大部分主流浏览器,地址:https://clipboardjs.com/ 下面写个简单的例子:HTML:注意,这里最好是button,并非所有的元素都支持该JS ...

  8. poj3259 Wormholes【Bellman-Ford或 SPFA判断是否有负环 】

    题目链接:poj3259 Wormholes 题意:虫洞问题,有n个点,m条边为双向,还有w个虫洞(虫洞为单向,并且通过时间为倒流,即为负数),问你从任意某点走,能否穿越到之前. 贴个SPFA代码: ...

  9. 显卡 GPU 关系

    https://zhidao.baidu.com/question/1238935513507031339.htmlGraphic Processing Unit,意思就是图形处理器啊,显卡的由GPU ...

  10. mac git 命令自动补全

    步骤如下: 1.下载Git-completion.bash 或者直接使用SourceTree去clone到本地. 下载地址:https://github.com/markgandolfo/git-ba ...