? ? 文章

LoadingBar YTB.uc.js:地址栏下方显示当前页面加载进度条,漂亮到不忍直视

2015.8.21:脚本版本更新为0.3.3,更新CSS linear-gradient(),radial-gradient()标准语法(nightly 150710)

【2015.4.6:脚本版本更新为0.3.2,解决了旧版本的LoadingBar.uc.js存在导致CPU占用升高、持续的BUG,请该脚本用户尽快升级到新版,感谢群友Der letzte wachter的反馈提醒】

很多人在求预览图中的那个圈圈样式代码,已经分享在这了:火狐CSS样式:网页加载时在标签上显示进度的圈圈,超漂亮

黑仪大螃蟹的作品在国内火狐圈是有口皆碑的,精品没的说,这次更新了LoadingBar.uc.js,版本号为0.3.1,站长试用了下,朦胧又不乏爽利的感觉真是醉了,如果你是个界面控,这个脚本不收就说不过去了,先来上个动态图:

 

▼小提示:脚本的效果请看地址栏下面那一行的进度条,脚本仅兼容Firefox34或以上版本

LoadingBar.uc.js:地址栏下方显示当前网页的加载进度条,漂亮到不忍直视

像这种又有爱,又小巧(脚本6.9KB)的UC脚本是站长的最爱了,用了没负担,还能达到美化的效果,其实火狐范之前有发过同名的脚本《LoadingBar.uc.js:地址栏内显示当前页面加载进度条》,是在地址栏里面显示加载进度条,本文分享的UC脚本作用在地址栏下方的1像素位置,相比之下,站长更喜欢本文分享的这个。

不止是UC脚本,CSS也可以实现相同的效果,小范之前也发布过了《火狐地址栏加载 进度条 炫酷样式:瞬间高大上,已补动态图预览》,实现的效果和本文的UC脚本大同小异,如果你喜欢CSS版的,可以去下载使用。

地址栏是我们用的最多的地方,对它的美化也是个永恒的话题,思路、作品层出不穷,更多关于地址栏的美化,请点击:《地址栏》。

UC脚本LoadingBar_0.3.1(YTB Ver.).uc.js下载地址
原文链接:,转发请注明来源!
3 0

发表评论

  • 评论26则,共1页,当前第1
    • awfiwgy

      请问怎么修改为纯红色,黄色看不清啊!

      0 0 Firefox 38.0 Firefox 38.0 Windows 7 x64 Edition Windows 7 x64 Edition回复
      • 修改脚本里面的颜色代码,改为你想要的颜色代码就可以了

        KingTung [管理员] 0 0 Google Chrome 45.0.2454.101 Google Chrome 45.0.2454.101 Windows 10 x64 Edition Windows 10 x64 Edition回复
        • 看到有好几处地方要改的,可以说说具体修改那里,网上找的代码不同,可否给个红色代码,先谢谢!

    • hnthgys

      下载地址又失效了。。。

      0 0 Firefox 41.0 Firefox 41.0 Windows 10 x64 Edition Windows 10 x64 Edition回复
    • laincat

      /*样式伪进度条*/
      @-moz-document url-prefix("http://"),url-prefix("https://"){
      html:before{
      content:"";
      position:fixed;height:1px;
      z-index:10000000;top:0;left:0;
      background: -moz-linear-gradient(top, rgb(232,25,87) 0%, rgb(170,0,51) 100%);
      box-shadow:0 1px 5px rgba(190,50,0,0.5);
      -moz-animation:jindu 3s ease 0.5s 1 forwards;
      }
      @-moz-keyframes jindu{
      0% {width:0;}
      99% {width:100%;}
      100%{width:0;}
      }
      }

      =========

      发个样式。

      0 0 Firefox 43.0 Firefox 43.0 Windows 10 x64 Edition Windows 10 x64 Edition回复
      • 下载链接已修复

      • 下载链接已修复

        • 感谢

          cyanite63 0 0 Internet Explorer 11.0 Internet Explorer 11.0 Windows 10 x64 Edition Windows 10 x64 Edition回复
    • yobboy

      原来找圈圈的不止我一个人啊!

      0 0 Firefox 38.0 Firefox 38.0 Windows 7 x64 Edition Windows 7 x64 Edition回复
    • P.Zone

      标签栏上那个标签页左侧的转的圆圈样式有没有!?

      0 0 Firefox 37.0 Firefox 37.0 Windows 7 x64 Edition Windows 7 x64 Edition回复
    • kudouzz

      请问中间的显示等待 读取 正在传输的绿色字样是用的什么

      0 0 Firefox 37.0 Firefox 37.0 Windows 8.1 x64 Edition Windows 8.1 x64 Edition回复
    • Chu2koi

      难怪最近我的火狐CPU占用老是偏高,更新这个之后就好了

    • qkwu

      这个的确不错

      0 0 Internet Explorer 11.0 Internet Explorer 11.0 Windows 8.1 x64 Edition Windows 8.1 x64 Edition回复
    • iaso2h

      请问标签页的加载动画样式是什么啊?就是标签左边那个转转的有点像写轮眼的圈

      • 我也在找那个转的圈圈!

    • poca

      这个34以下的版本也能用的,我28就能用。这个效果比css好多了

      • 渐变效果做的相当迷人

    • wle6

      以前的css一直在用,这次的脚本继续收藏,谢谢站长,支持firefoxfan。

    • who

      很漂亮!!非常喜欢!!

      0 1 Firefox 36.0 Firefox 36.0 Windows 7 x64 Edition Windows 7 x64 Edition回复