alanfly

千年狐狸

UID31035
注册日期2009-11-10
最后登录2025-04-23
发帖数2783
经验595枚
威望1点
贡献值132点
好评度106点

加关注写私信

阅读：9905回复：30

自定义progress line的颜色和透明度

楼主^#

更多发布于：2010-09-17 23:07

默认的颜色和透明度很不显眼，可以用下面的css自定义；
颜色分为三部分，由左开始在progress line上分三段渐变显示，跟在rgb值后面的是颜色的透明度。

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

.tab-progress > .progress-bar,#urlbar-progress > .progress-bar 
{background-image: -moz-linear-gradient(left, rgba(39,197,255,.5),
                                               rgba(39,197,255,.7),
                                               rgba(39,197,255,.95)) !important;}

更新一下，地址栏和标签的progress line分开单独设置，前面是标签上的，后面是地址栏的；

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

.tab-progress > .progress-bar
{background-image: -moz-linear-gradient(left, rgba(39,197,255,.5),
                                               rgba(39,197,255,.7),
                                               rgba(39,197,255,.95)) !important;}

#urlbar-progress > .progress-bar
{background-image: -moz-linear-gradient(left, rgba(127,255,0,.3),
                                               rgba(127,255,0,.6),
                                               rgba(127,255,0,.85)) !important;}

效果图：

图片：pl.png
图片：pline.png

喜欢0

alanfly 千年狐狸 UID31035 注册日期2009-11-10 最后登录2025-04-23 发帖数2783 经验595枚威望1点贡献值132点好评度106点加关注写私信	1楼^# 发布于：2010-09-17 23:07 racca：那个其实是opacity, 不透明度回到原帖谢谢指正。
	回复(0) 喜欢(0)

racca 小狐狸 UID33213 注册日期2010-06-29 最后登录2011-03-28 发帖数63 经验10枚威望0点贡献值0点好评度0点加关注写私信	2楼^# 发布于：2010-09-17 23:07 不明显可以设置个醒目的颜色或者把透明度调高。那个其实是opacity, 不透明度
	回复(0) 喜欢(0)

kmc

管理员

UID165
注册日期2004-11-25
最后登录2024-08-29
发帖数9187
经验398枚
威望1点
贡献值124点
好评度41点

加关注写私信

3楼^#

发布于：2010-09-17 23:07

不用，根据实测，红黄绿在载入的过程中看起来已经像彩虹。

Waterfox Current和Firefox Nightly都用，逐渐走出XUL扩展依赖

回复喜欢

alanfly

千年狐狸

UID31035
注册日期2009-11-10
最后登录2025-04-23
发帖数2783
经验595枚
威望1点
贡献值132点
好评度106点

加关注写私信

4楼^#

发布于：2010-09-17 23:07

openicq：结合alanfly和mattmonkey的想法
我现在自己用的代码
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); .tab-progress > .progress-bar {background-image: -moz-linear-gradient(left, rgba(0,255,0,.5), rgba(0,255,0,.7), rgba(0,255,0,.95)) !important;} #urlbar-progress > .progress-bar {background-image: -moz-linear-gradient(left, rgba(255,0,255,.95), rgba(255,255,0,.95), rgba(0,255,0,.95)) !important;}

地址栏的progress line根据载入的进度依次变色红->黄->绿跟红绿灯似的呵呵
标签栏的progress line因为长度比较短所以就不搞几种颜色了只用绿色透明度根据载入的进度渐变回到原帖

干脆再多加几种颜色，凑成七色彩虹。

回复喜欢

咪姆

非常火狐

UID2913
注册日期2005-02-10
最后登录2022-12-13
发帖数951
经验13枚
威望0点
贡献值0点
好评度1点

加关注写私信

5楼^#

发布于：2010-09-17 23:07

openicq：结合alanfly和mattmonkey的想法
我现在自己用的代码
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); .tab-progress > .progress-bar {background-image: -moz-linear-gradient(left, rgba(0,255,0,.5), rgba(0,255,0,.7), rgba(0,255,0,.95)) !important;} #urlbar-progress > .progress-bar {background-image: -moz-linear-gradient(left, rgba(255,0,255,.95), rgba(255,255,0,.95), rgba(0,255,0,.95)) !important;}

地址栏的progress line根据载入的进度依次变色红->黄->绿跟红绿灯似的呵呵
标签栏的progress line因为长度比较短所以就不搞几种颜色了只用绿色透明度根据载入的进度渐变回到原帖

很醒目，谢谢！

回复喜欢

fireman 火狐狸 UID33071 注册日期2010-06-15 最后登录2013-04-27 发帖数139 经验10枚威望0点贡献值0点好评度0点加关注写私信	6楼^# 发布于：2010-09-17 23:07 结合alanfly和mattmonkey的想法我现在自己用的代码地址栏的progress line根据载入的进度依次变色红->黄->绿跟红绿灯似的呵呵标签栏的progress line因为长度比较短所以就不搞几种颜色了只用绿色透明度根据载入的进度渐变这个彩色的很不错，总算没那么丑陋＋不显眼＋呆板了。
	回复(0) 喜欢(0)

jiahuiqu

火狐狸

UID32722
注册日期2010-05-03
最后登录2012-10-09
发帖数218
经验10枚
威望0点
贡献值0点
好评度0点

加关注写私信

7楼^#

发布于：2010-09-17 23:07

openicq：结合alanfly和mattmonkey的想法
我现在自己用的代码
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); .tab-progress > .progress-bar {background-image: -moz-linear-gradient(left, rgba(0,255,0,.5), rgba(0,255,0,.7), rgba(0,255,0,.95)) !important;} #urlbar-progress > .progress-bar {background-image: -moz-linear-gradient(left, rgba(255,0,255,.95), rgba(255,255,0,.95), rgba(0,255,0,.95)) !important;}

地址栏的progress line根据载入的进度依次变色红->黄->绿跟红绿灯似的呵呵
标签栏的progress line因为长度比较短所以就不搞几种颜色了只用绿色透明度根据载入的进度渐变回到原帖

相当好看,用上了

回复喜欢

msky 千年狐狸 UID14649 注册日期2006-09-21 最后登录2025-03-06 发帖数2966 经验176枚威望0点贡献值24点好评度10点加关注写私信	8楼^# 发布于：2010-09-17 23:07 记号，楼上的代码不错，默认的蓝色太不显眼了，不注意都看不出来，还是绿色好一些
	回复(0) 喜欢(0)

openicq

狐狸大王

UID5412
注册日期2005-04-23
最后登录2015-12-15
发帖数353
经验10枚
威望0点
贡献值0点
好评度0点

加关注写私信

9楼^#

发布于：2010-09-17 23:07

结合alanfly和mattmonkey的想法
我现在自己用的代码

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

.tab-progress > .progress-bar
{background-image: -moz-linear-gradient(left, rgba(0,255,0,.5),
                                               rgba(0,255,0,.7),
                                               rgba(0,255,0,.95)) !important;}

#urlbar-progress > .progress-bar
{background-image: -moz-linear-gradient(left, rgba(255,0,255,.95),
                                               rgba(255,255,0,.95),
                                               rgba(0,255,0,.95)) !important;}

地址栏的progress line根据载入的进度依次变色红->黄->绿跟红绿灯似的呵呵
标签栏的progress line因为长度比较短所以就不搞几种颜色了只用绿色透明度根据载入的进度渐变

回复喜欢

alanfly

千年狐狸

UID31035
注册日期2009-11-10
最后登录2025-04-23
发帖数2783
经验595枚
威望1点
贡献值132点
好评度106点

加关注写私信

10楼^#

发布于：2010-09-17 23:07

hoolooday：这个是不是在当前标签,显示地址栏的进度条
而其它标签打开,并且不激活时,用标签栏上的进度条呢?
能不能修改为都在标签上显示,或者都在地址栏显示呢?回到原帖

这个功能是b7的新功能，这里只提供修改样式的方法，移到标签上css做不到；
[quote="fireman"]确实，能不能设置都在标签上显示呢，地址栏那条实在太不明显。因为一般情况下都是盯着标签上的线，切换到当前标签就又变成地址栏那条，非常累眼。或者圆饼回归就更好了。[/quote]
不明显可以设置个醒目的颜色或者把透明度调高。

回复喜欢

fireman 火狐狸 UID33071 注册日期2010-06-15 最后登录2013-04-27 发帖数139 经验10枚威望0点贡献值0点好评度0点加关注写私信	11楼^# 发布于：2010-09-17 23:07 确实，能不能设置都在标签上显示呢，地址栏那条实在太不明显。因为一般情况下都是盯着标签上的线，切换到当前标签就又变成地址栏那条，非常累眼。或者圆饼回归就更好了。
	回复(0) 喜欢(0)

hoolooday 火狐狸 UID26508 注册日期2008-10-02 最后登录2015-05-22 发帖数173 经验11枚威望0点贡献值0点好评度0点加关注写私信	12楼^# 发布于：2010-09-17 23:07 这个是不是在当前标签,显示地址栏的进度条而其它标签打开,并且不激活时,用标签栏上的进度条呢? 能不能修改为都在标签上显示,或者都在地址栏显示呢?
	回复(0) 喜欢(0)

听着风小狐狸 UID32169 注册日期2010-03-02 最后登录2013-10-29 发帖数96 经验10枚威望0点贡献值0点好评度0点加关注写私信	13楼^# 发布于：2010-09-17 23:07 谢谢一会儿去试试
	回复(0) 喜欢(0)

forfirefox 火狐狸 UID32807 注册日期2010-05-11 最后登录2016-06-07 发帖数243 经验23枚威望0点贡献值14点好评度0点加关注写私信	14楼^# 发布于：2010-09-17 23:07 mark一下，以后研究。
	回复(0) 喜欢(0)

您需要登录后才可以回帖，登录或者注册

自定义progress line的颜色和透明度

最新喜欢：