progress进度条的样式修改

由于公司在做的公众号上需要进度条,我就想着用progress标签,可是progress标签很难修改样式,因而在网上查询了一番。

现在总结一下。

progress是H5新标签,主要用于显示进度条。由于他是H5新标签,因而它存在一些兼容问题。

看看他的兼容性:

由此可看,progress样式修改兼容性不是很好。

因而需要兼容写法:

Chrome下:



 1 progress{
 2     width: 168px;
 3     height: 5px;
 4     color:#f00;
 5     background:#EFEFF4;
 6     border-radius: 0.1rem;
 7 }
 8 /* 表示总长度背景色 */
 9 progress::-webkit-progress-bar{
10     background-color: #f2f2f2;
11     border-radius: 0.2rem;
12 }
13 /* 表示已完成进度背景色 */
14 progress::-webkit-progress-value{
15       background: #a21211;
16       border-radius: 0.2rem;
17 }


FireFox下:

 1 progress{
 2     width: 168px;
 3     height: 5px;
 4     color:#f00;
 5     background:#EFEFF4;     /* 表示总长度背景色 */
 6 }
 7 /* 表示已完成进度背景色 */
 8 progress::-moz-progress-bar{
 9      background-color:#f00;
10 }

IE10及以上:

1 progress{
2     width: 168px;
3     height: 5px;
4     color:#f00;      /* 表示已完成进度背景色 */
5     background:#EFEFF4;     /* 表示总长度背景色 */
6 }

调整后的结果:

如果你是做移动端的,以谷歌浏览器为准。谷歌上进度条是什么颜色,手机上就是什么颜色。

参考文章:张鑫旭老师progress样式详解 https://www.zhangxinxu.com/wordpress/2013/02/html5-progress-element-style-control/

原文地址:https://www.cnblogs.com/zr123/p/9589517.html

时间: 2024-11-09 02:42:48

progress进度条的样式修改的相关文章

微信小程序组件解读和分析:六、progress进度条

progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. progress进度条组件示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 5 <!--index.wxml--> <view class="content">     <text class="con-t

ProgressBar学习笔记,自定义横向进度条的样式(包含ActionBar上面的进度条)

 点显示进度条后→   android:max="100" 进度条的最大值 android:progress  进度条已经完成的进度值 android:progressDrawable 已经完成的进度条轨道显示的Drawable对象 indeterminateDrawable   设置绘制不显示进度的进度条的Drawable对象 android:indeterminate 设置为true,进度条不精准显示进度 android:indeterminateDuration  设置不精准显示

wpf silder进度条的样式模板,带有进度颜色显示

效果图: 只需在前台加上这段代码即可: <UserControl.Resources> <!--笔刷--> <LinearGradientBrush x:Key="SliderBackground" StartPoint="0,0" EndPoint="0,1"> <GradientStop Offset="0" Color="#59ccfc"/> <G

自定义Android进度条ProgressBar样式

进度条在Android应用中随处或见,都是为用户提供一个提示,用来增加用户的体验度!进度条样式多种多样,有圆形的,有条形的,有垂直方向的,也有水平方向的.Android系统也是我们提供了好几种默认的样式,今天我们来讲讲自定义样式的ProgressBar. 下面用个很小(又是很小)的例子: -------------------------xml布局-------------------------------------------- <ProgressBar android:id="@+

(六十八)进度条自定义样式(例如进度颜色、背景描边、填充、圆角)的方法

一.说明. <1>在某项延续性工作的进展过程中为了不让用户觉得程序死掉了,需要有个活动的进度条,表示此过程正在进行中.<2>在某些操作的进度中的可视指示器,为用户呈现操作的进度,还它有一个次要的进度条,用来显示中间进度,如在流媒体播放的缓冲区的进度.一个进度条也可不确定其进度.在不确定模式下,进度条显示循环动画.这种模式常用于应用程序使用任务的长度是未知的. 二.ProgressBar的两个进度. 一个是android:progress;另一个是android:secondaryP

bootstrap3的 progress 进度条

: 2.3版               3.0版 .bar .progress-bar .bar-* .progress-bar-* 2.代码: [html] view plain copy <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html x

Android Progress进度条代码,进度条刷新问题探讨

转载注明出处,Lee http://blog.csdn.net/hnulwt/article/details/44462177 今天看到讨论说关于进度条走的慢的问题.实际问题是这样的:后台执行的程序速度会很快,但是在界面上感觉得到进度条是走的比较慢的.为此,做了一个小实验,代码上实验在1秒的时间 通过俩种方式增加进度条至100%(每隔10ms增加1%和 每隔250ms增加25%),验证哪种方式给人的感觉快,但是在demo做出来之后,确发现了新的问题,想在此与大家共同讨论. 问题 根据代码,我预想

android 进度条ProgressBar样式设置

普通圆形ProgressBar 该类型进度条也就是一个表示运转的过程,例如发送短信,连接网络等等,表示一个过程正在执行中.一般只要在XML布局中定义就可以了. <progressBar Android:id="@+id/widget43" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="

Android-做个性化的进度条

1.案例效果图 2.准备素材                                progress1.png(78*78)              progress2.png(78*78) 3.原理 采用一张图片作为ProgressBar的背景图片(一般采用颜色比较浅的).另一张是进度条的图片(一般采用颜色比较深的图片).进度在滚动时:进度图片逐步显示,背景图片逐步隐藏,达到上面的效果. 4.灵感来自Android控件提供的源码 4.1 默认带进度的进度条,如下图 1 <Progre