logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

Pace 简单打造超赞网页加载进度条

 看见就非常 2014-10-01


这款进度条最早应用于Micro-M Theme的Navbar下方，不过当时的实现方式还是比较复杂的。

现在，Mike现在采用一个叫Pace小插件来获得网页加载进度条，在页面中引入 pace.js 和您所选择主题的 CSS 文件，就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果。不需要挂接到任何代码，自动检测进展。

可以选择颜色和多种效果，有简约，闪光灯，MAC OSX，左侧填充，顶部填充，计数器和弹跳等等。

在https://github.com/HubSpot/pace/tree/master/themes还有很多主题可供选择。

添加方法

1.在网页头部处引入

  1. <head>   
  2.   <script src="/pace/pace.js"></script>   
  3.   <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" />   
  4. </head>  

2.在Style.css中添加你中意的效果的CSS

这是我目前使用的一款：

pace.png

  1. .pace {   
  2.   -webkit-pointer-events: none;   
  3.   pointer-events: none;   
  4.   -webkit-user-select: none;   
  5.   -moz-user-select: none;   
  6.   user-select: none;   
  7. }   
  8.   
  9. .pace-inactive {   
  10.   display: none;   
  11. }   
  12.   
  13. .pace .pace-progress {   
  14.   background: #ddd;   
  15.   position: fixed;   
  16.   z-index: 100;   
  17.   top: 0;   
  18.   left: 0;   
  19.   height: 2px;   
  20. }   
  21.   
  22. .pace .pace-progress-inner {   
  23.   display: block;   
  24.   position: absolute;   
  25.   rightright: 0px;   
  26.   width: 100px;   
  27.   height: 100%;   
  28.   box-shadow: 0 0 10px #ddd, 0 0 5px #ddd;   
  29.   opacity: 1.0;   
  30.   -webkit-transform: rotate(3deg) translate(0px, -4px);   
  31.   -moz-transform: rotate(3deg) translate(0px, -4px);   
  32.   -ms-transform: rotate(3deg) translate(0px, -4px);   
  33.   -o-transform: rotate(3deg) translate(0px, -4px);   
  34.   transform: rotate(3deg) translate(0px, -4px);   
  35. }   
  36.   
  37. .pace .pace-activity {   
  38.   display: block;   
  39.   position: fixed;   
  40.   z-index: 100;   
  41.   top: 15px;   
  42.   rightright: 15px;   
  43.   width: 14px;   
  44.   height: 14px;   
  45.   border: solid 2px transparent;   
  46.   border-top-color: #ddd;   
  47.   border-left-color: #ddd;   
  48.   border-radius: 10px;   
  49.   -webkit-animation: pace-spinner 400ms linear infinite;   
  50.   -moz-animation: pace-spinner 400ms linear infinite;   
  51.   -ms-animation: pace-spinner 400ms linear infinite;   
  52.   -o-animation: pace-spinner 400ms linear infinite;   
  53.   animation: pace-spinner 400ms linear infinite;   
  54. }   
  55.   
  56. @-webkit-keyframes pace-spinner {   
  57.   0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }   
  58.   100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }   
  59. }   
  60. @-moz-keyframes pace-spinner {   
  61.   0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }   
  62.   100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }   
  63. }   
  64. @-o-keyframes pace-spinner {   
  65.   0% { -o-transform: rotate(0deg); transform: rotate(0deg); }   
  66.   100% { -o-transform: rotate(360deg); transform: rotate(360deg); }   
  67. }   
  68. @-ms-keyframes pace-spinner {   
  69.   0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }   
  70.   100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }   
  71. }   
  72. @keyframes pace-spinner {   
  73.   0% { transform: rotate(0deg); transform: rotate(0deg); }   
  74.   100% { transform: rotate(360deg); transform: rotate(360deg); }   
  75. }  

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 看见就非常 > 《tip》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多