屌丝论坛

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

nimaboke 2014-11-30 3615

在页面中引入pace.js 和您所选择主题的 CSS 文件，就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果。不需要挂接到任何代码，自动检测进展。

4156130491.png

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

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


添加方法

1.在头部引入css及js（获取文件） 

<head>
  <script src="/pace/pace.js"></script>
  <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" />
</head>
2.在主题的css中加入 

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: #ddd;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  height: 2px;
}

.pace .pace-progress-inner {
  display: block;
  position: absolute;
  rightright: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #ddd, 0 0 5px #ddd;
  opacity: 1.0;
  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -moz-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  -o-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
}

.pace .pace-activity {
  display: block;
  position: fixed;
  z-index: 100;
  top: 15px;
  rightright: 15px;
  width: 14px;
  height: 14px;
  border: solid 2px transparent;
  border-top-color: #ddd;
  border-left-color: #ddd;
  border-radius: 10px;
  -webkit-animation: pace-spinner 400ms linear infinite;
  -moz-animation: pace-spinner 400ms linear infinite;
  -ms-animation: pace-spinner 400ms linear infinite;
  -o-animation: pace-spinner 400ms linear infinite;
  animation: pace-spinner 400ms linear infinite;
}

@-webkit-keyframes pace-spinner {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes pace-spinner {
  0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes pace-spinner {
  0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes pace-spinner {
  0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes pace-spinner {
  0% { transform: rotate(0deg); transform: rotate(0deg); }
  100% { transform: rotate(360deg); transform: rotate(360deg); }
}
转自微狐网



小智 评论：
{smile:36}前排
爱我博客 评论：
{smile:2}啦啦啦
wu1yi2fan 评论：
有木有Demo……{smile:45}
松果 评论：
越有内涵的人越低调{smile:26}
李明 评论：
不错不错。
鲜活 评论：
很详细的教程 谢谢
阿生 评论：
不错！学习了
淡忘~浅思 评论：
mark了 多谢分享
天黑 评论：
就看看
百家网络博客 评论：
右下角的%也是用到这个？
吴尼玛 评论：
@百家网络博客：右下角的有分享，但不是用的这个
收藏的用户（0） X
正在加载信息~
最新回复 (0)
    • 屌丝论坛
      2 楼
        丨 丨