Progress 元素是 HTML5 标准草案中新增的元素之一,W3C 关于此元素的定义请猛击这里。默认情况下,Progress 会生成一个和系统默认样式一样的进度条。Webkit 中对于 Progress 的默认样式定义在这里可以找到。在 Windows 7 和 MaxOS Lion 中的显示效果如下:
看起来貌似还不错,但是如果运行在 Windows XP 下呢?想一下就够头疼了,何况出于一致性的考虑,很多情况下我们还是想能够控制这个进度条的样式。
查看了 Webkit 项目中关于 Element Progress 的定义,Progress 在渲染时会被解析成以下结构:
<progress>
┗ <div> ::-webkit-progress-bar
┗ <div>::-webkit-progress-value
通过 ::-webkit-progress-bar 和 ::-webkit-progress-value 两个伪元素选择符(之前伪元素的名称是 ::-webkit-progress-bar-value,今年上半年的某个 Patch 改成了现在这样,这里可以看到 Chromium 中一个相关的 Issue),可以定义第一层和第二层的两个 div 的样式。
示例:
progress {
border-radius: 2px;
border-left: 1px #ccc solid;
border-right: 1px #ccc solid;
border-top: 1px #aaa solid;
background-color: #eee;
}
progress::-webkit-progress-bar {
background-color: #d7d7d7;
}
progress::-webkit-progress-value {
background-color: #aadd6a;
}
以上 CSS 可以定义一个如下效果的 Progress Bar:
同时支持 CSS 动画、背景图片等特性哦,这样就可以根据自己的需要打造一个完全个性化的 Progress Bar 了。另外 Gecko 核心的浏览器也可以通过一个类似的伪元素 ::-moz-progress-bar 来实现同样的效果。IE 全系不支持此元素(这简直是一定的)。
- 大小: 11.3 KB
- 大小: 11.5 KB
- 大小: 6.3 KB
分享到:
相关推荐
Android几种自定义 Progress很好用 很好用
自定义View环形Progress
android progress 各种自定义样式
自定义progress,可用于做统计和下载进度
可自定义进度条(Progress)状态显示,源码TWRProgressView,该效果不但可以支持了自定义进度可自定义进度条(Progress)状态显示状态显示 在图片上增加蒙版控制显示的进度,而且还可以自定义图片等效果的。 A custom ...
iPhone之实现自定义进度条Progress
html5 progress进度条颜色和背景色修改
android之通过clip自定义progress的样式
如何自定义seekBar的样式 应用中自定seekbar: 1:首先在布局文件中添加seekbar控件 android:layout_width="300px" android:layout_height="wrap_content" android:max="100" android:progress="0" ...
jni实现自定义progress(锅炉压力监测) csdn:http://blog.csdn.net/u014657752
一个C# progress bar 自定义控件,类似visual studio 的安装进度显示,可以显示当前进度的具体状态
ProgressBar原始进度条与简单的自定义进度条的使用
使用ProgressBar实现进度条,设置进度条显示风格。以及自定义进度条样式
一个简单的自定义view的例子,主要是提供学习styleable。
自定义下载 的progress
Html5炫酷进度条-html5-css3-progress-bar 更多资源: http://cleopard.download.csdn.net
这个demo是关于android中继承Dialog重新自定义一个ProgressDialog。 需求:带加载图片和文字说明,可定时停止也可被动中断。 如有BUG或者不完善,欢迎小伙伴们提出~
可自定义圆形进度条Progress特效,这个源码实现了继承view的子类,重写ondraw,实时计算画出进度,实现圆形进度条的效果,开发进度条的朋友可以研究试试看。
progress各种各样的都有,自定义大多数也是简单的,根据业务需求来自己定义,记录一下,先上效果图 本来想找个第三方改改就上的,不过自己的业务需求有点不搭,一下子没找到合适的,也没这么多时间去找了,想想还是...