2017年2月20日12:11:25

官网URL:http://github.hubspot.com/pace/docs/welcome/

文档 http://github.hubspot.com/pace/

本人测试,是兼容手机的,所以放心使用

pace

在你的页面上包含pace.js和你选择的主题css(尽可能早),你就完成了!

Pace将自动监视您的ajax请求,事件循环滞后,文档就绪状态和页面上的元素以决定进度。 在ajax导航它会再次开始!

如果你使用AMD或Browserify,需要在pace.js和调用pace.start()早在加载过程是可能的。

安装在Wordpress上

您可以通过安装Wordpress插件添加PACE到您的Wordpress网站。

实例

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

配置

速度是完全自动的,没有配置是必要的开始。

如果你想做一些调整,这里是如何:

您可以在引入文件之前设置window.paceOptions:

paceOptions = {
  // Disable the 'elements' source
  elements: false,

  // Only show the progress on regular and ajax-y page navigation,
  // not every request
  restartOnRequestAfter: false
}

您还可以在脚本标记上放置选项:

<script data-pace-options='{ "ajax": false }' src='pace.js'></script>

如果您使用AMD或Browserify,您可以传递您的选项开始:

define(['pace'], function(pace){
  pace.start({
    document: false
  });
});

主题

Pace包括一大堆主题,让你开始。 只需包括适当的css文件。 向我们发送公关与您创建的任何有趣的主题。

http://github.hubspot.com/pace/docs/welcome/ 里面有主题模板注意

收集器

收集器是收集进度信息的代码位。 Pace包括四个默认收集器:

  • Ajax

    监控页面上所有的Ajax请求

  • Elements

    对于页面上的特定元素的存在性检查

  • Document

    检查Document元素状态

  • Event Lag

    检查事件循环滞后信号,表明正在执行javascript

它们可以通过相同名称的配置选项配置或禁用。

paceOptions = {
  ajax: false, // disabled
  document: false, // disabled
  eventLag: false, // disabled
  elements: {
    selectors: ['.my-page']
  }
};

将您自己的类添加到paceOptions.extraSources以添加更多源。 每个源应该有一个.progress属性,或者一个.elements属性,它是带有.progress属性的对象的列表。 Pace将自动处理所有缩放,使进度更改对用户看起来流畅。

元素

正在呈现到屏幕的元素是我们决定页面被呈现的一种方式。 如果要使用该信息源(根本不需要),请指定一个或多个选择器。 您可以逗号分隔选择器以适当地处理错误状态,其中进度条应该消失,但是我们正在寻找的元素可能永远不会出现:

paceOptions = {
  elements: {
    selectors: ['.timeline,.timeline-error', '.user-profile,.profile-error']
  }
}

当每个选择器匹配什么时,Pace会考虑元素测试成功。 对于此示例,如果存在.timeline或.timeline错误,并且存在.user-profile或.profile-error。

重新启动规则

大多数用户希望进度条在pushState事件发生时自动重新启动(通常意味着ajax导航正在发生)。 您可以禁用此功能:

paceOptions = {
  restartOnPushState: false
}

您还可以对每个持续时间超过x ms的ajax请求重新启动步速。 你想禁用这个,如果你使ajax请求用户不需要知道,像预缓存:

paceOptions = {
  restartOnRequestAfter: false
}

您可以随时通过调用Pace.restart()手动触发重新启动,

有关所有选项的完整列表,请参阅源代码。

API

Pace公开了以下方法:

  • Pace.start:显示进度条并开始更新。 如果不使用AMD或CommonJS,则自动调用。

  • Pace.restart: 如果进度条已隐藏,则显示进度条,并开始从头开始报告进度。 在默认情况下调用pushState或replaceState时自动调用。

  • Pace.stop: 隐藏进度条并停止更新。

  • Pace.track: 显式跟踪一个或多个请求,请参阅下面的跟踪

  • Pace.ignore: 显式忽略一个或多个请求,请参阅下面的跟踪

Events事件

Pace触发以下事件:

  • start: 当pace初始化开始时,或作为重新启动的一部分
  • stop: 当pace手动停止时,或作为重新启动的一部分
  • restart: 当重新启动pace(手动,或通过新的AJAX请求)
  • done: 当pace完成时
  • hide: 当pace被隐藏时(可以晚于,基于ghostTime和minTime)

您可以使用on,off和once方法绑定到事件:

  • Pace.on(event, handler, [context]): 事件触发时的调用处理程序(可选择使用上下文)
  • Pace.off(event, [handler]): 取消绑定提供的事件和处理程序组合。
  • Pace.once(event, handler, [context]): 绑定处理程序到下一个(而且只有下一个)事件发生率

跟踪

默认情况下,Pace会显示任何ajax请求,它们作为正常或ajax-y页面加载的一部分开始,或者持续时间超过500ms。

您可以通过使用ajax为false禁用所有的ajax跟踪:

Pace.options = {
  ajax: false
}

您可以通过将restartOnRequestAfter设置为false来禁用ajax跟踪(页面导航除外):

Pace.options = {
  restartOnRequestAfter: false
}

您可以通过在Pace.ignorecallback中触发对特定请求或请求手动禁用跟踪:

Pace.ignore(function(){
  $.ajax(...)
});

您可以通过在Pace.trackcallback内触发进度条来强制显示特定请求的进度条:

Pace.track(function(){
  $.ajax(...)
});

您也可以根据模式忽略网址:

Pace.options = {
  ajax: {
    ignoreURLs: ['some-substring', /some-regexp/]
  }
}

依赖

没有!

支持

Pace旨在支持IE8 +(标准模式),FF 3.5+,Chrome,Safari 4+,Opera 10.5+和所有现代移动浏览器。 如果您遇到兼容性问题,或者可以提供支持其他功能的情况,请创建一个问题。

文件大小

pace.js是4kb缩小和gzipped。 主题介于0.5和4kb之间。

问题

我们显然没有在每个网站上测试这个。 如果您遇到问题,或找到自动检测可能更好的方法,请创建一个问题。 如果你可以包括一个测试用例,那就更好了。

贡献

PRs 欢迎!

构建需要node.js.

npm install
grunt

您也可以运行grunt watch,让它在您进行更改时自动构建。

没有必要在PRs中包括编译的文件。

支持的一些其他主题,其实也就是一些css,直接引用就行了pace.css

主题css代码

Flash

.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: #29d;
  position: fixed;
  z-index:;
  top:;
  right: 100%;
  width: 100%;
  height: 2px;
}

.pace .pace-progress-inner {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  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:;
  top: 15px;
  right: 15px;
  width: 14px;
  height: 14px;
  border: solid 2px transparent;
  border-top-color: #29d;
  border-left-color: #29d;
  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); }
}

Barber Shop

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

  overflow: hidden;
  position: fixed;
  top:;
  left:;
  z-index:;
  width: 100%;
  height: 12px;
  background: #fff;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background-color: #29d;
  position: fixed;
  top:;
  bottom:;
  right: 100%;
  width: 100%;
  overflow: hidden;
}

.pace .pace-activity {
  position: fixed;
  top:;
  right: -32px;
  bottom:;
  left:;

  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);

  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  -webkit-background-size: 32px 32px;
  -moz-background-size: 32px 32px;
  -o-background-size: 32px 32px;
  background-size: 32px 32px;

  -webkit-animation: pace-theme-barber-shop-motion 500ms linear infinite;
  -moz-animation: pace-theme-barber-shop-motion 500ms linear infinite;
  -ms-animation: pace-theme-barber-shop-motion 500ms linear infinite;
  -o-animation: pace-theme-barber-shop-motion 500ms linear infinite;
  animation: pace-theme-barber-shop-motion 500ms linear infinite;
}

@-webkit-keyframes pace-theme-barber-shop-motion {
  0% { -webkit-transform: none; transform: none; }
  100% { -webkit-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@-moz-keyframes pace-theme-barber-shop-motion {
  0% { -moz-transform: none; transform: none; }
  100% { -moz-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@-o-keyframes pace-theme-barber-shop-motion {
  0% { -o-transform: none; transform: none; }
  100% { -o-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@-ms-keyframes pace-theme-barber-shop-motion {
  0% { -ms-transform: none; transform: none; }
  100% { -ms-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@keyframes pace-theme-barber-shop-motion {
  0% { transform: none; transform: none; }
  100% { transform: translate(-32px, 0); transform: translate(-32px, 0); }
}

Mac OSX

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

  overflow: hidden;
  position: fixed;
  top:;
  left:;
  z-index:;
  width: 100%;
  height: 12px;
  background: #fff;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background-color: #0087E1;
  position: fixed;
  top:;
  right: 100%;
  width: 100%;
  height: 12px;
  overflow: hidden;

  -webkit-border-radius: 0 0 4px 0;
  -moz-border-radius: 0 0 4px 0;
  -o-border-radius: 0 0 4px 0;
  border-radius: 0 0 4px 0;

  -webkit-box-shadow: inset -1px 0 #00558F, inset 0 -1px #00558F, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3);
  -moz-box-shadow: inset -1px 0 #00558F, inset 0 -1px #00558F, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3);
  -o-box-shadow: inset -1px 0 #00558F, inset 0 -1px #00558F, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3);
  box-shadow: inset -1px 0 #00558F, inset 0 -1px #00558F, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3);
}

.pace .pace-activity {
  position: fixed;
  top:;
  left:;
  right: -28px;
  bottom:;

  -webkit-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%);
  -moz-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%);
  -o-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%);
  background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%);

  -webkit-background-size: 28px 100%;
  -moz-background-size: 28px 100%;
  -o-background-size: 28px 100%;
  background-size: 28px 100%;

  -webkit-animation: pace-theme-mac-osx-motion 500ms linear infinite;
  -moz-animation: pace-theme-mac-osx-motion 500ms linear infinite;
  -ms-animation: pace-theme-mac-osx-motion 500ms linear infinite;
  -o-animation: pace-theme-mac-osx-motion 500ms linear infinite;
  animation: pace-theme-mac-osx-motion 500ms linear infinite;
}

@-webkit-keyframes pace-theme-mac-osx-motion {
  0% { -webkit-transform: none; transform: none; }
  100% { -webkit-transform: translate(-28px, 0); transform: translate(-28px, 0); }
}
@-moz-keyframes pace-theme-mac-osx-motion {
  0% { -moz-transform: none; transform: none; }
  100% { -moz-transform: translate(-28px, 0); transform: translate(-28px, 0); }
}
@-o-keyframes pace-theme-mac-osx-motion {
  0% { -o-transform: none; transform: none; }
  100% { -o-transform: translate(-28px, 0); transform: translate(-28px, 0); }
}
@-ms-keyframes pace-theme-mac-osx-motion {
  0% { -ms-transform: none; transform: none; }
  100% { -ms-transform: translate(-28px, 0); transform: translate(-28px, 0); }
}
@keyframes pace-theme-mac-osx-motion {
  0% { transform: none; transform: none; }
  100% { transform: translate(-28px, 0); transform: translate(-28px, 0); }
}

Fill Left

.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-color: rgba(0, 0, 0, 0.19999999999999996);
  position: fixed;
  z-index: -1;
  top:;
  right: 100%;
  bottom:;
  width: 100%;
}

Flat Top

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

  position: fixed;
  top:;
  left:;
  width: 100%;

  -webkit-transform: translate3d(0, -50px, 0);
  -ms-transform: translate3d(0, -50px, 0);
  transform: translate3d(0, -50px, 0);

  -webkit-transition: -webkit-transform .5s ease-out;
  -ms-transition: -webkit-transform .5s ease-out;
  transition: transform .5s ease-out;
}

.pace.pace-active {
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.pace .pace-progress {
  display: block;
  position: fixed;
  z-index:;
  top:;
  right: 100%;
  width: 100%;
  height: 10px;
  background: #29d;

  pointer-events: none;
}

Big Counter

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace.pace-inactive .pace-progress {
  display: none;
}

.pace .pace-progress {
  position: fixed;
  z-index:;
  top:;
  right:;
  height: 5rem;
  width: 5rem;

  -webkit-transform: translate3d(0, 0, 0) !important;
  -ms-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}

.pace .pace-progress:after {
  display: block;
  position: absolute;
  top:;
  right: .5rem;
  content: attr(data-progress-text);
  font-family: "Helvetica Neue", sans-serif;
  font-weight:;
  font-size: 5rem;
  line-height:;
  text-align: right;
  color: rgba(0, 0, 0, 0.19999999999999996);
}

Corner Indicator

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace .pace-activity {
  display: block;
  position: fixed;
  z-index:;
  top:;
  right:;
  width: 300px;
  height: 300px;
  background: #29d;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg);
  transform: translateX(100%) translateY(-100%) rotate(45deg);
  pointer-events: none;
}

.pace.pace-active .pace-activity {
  -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg);
  transform: translateX(50%) translateY(-50%) rotate(45deg);
}

.pace .pace-activity::before,
.pace .pace-activity::after {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    bottom: 30px;
    left: 50%;
    display: block;
    border: 5px solid #fff;
    border-radius: 50%;
    content: '';
}

.pace .pace-activity::before {
    margin-left: -40px;
    width: 80px;
    height: 80px;
    border-right-color: rgba(0, 0, 0, .2);
    border-left-color: rgba(0, 0, 0, .2);
    -webkit-animation: pace-theme-corner-indicator-spin 3s linear infinite;
    animation: pace-theme-corner-indicator-spin 3s linear infinite;
}

.pace .pace-activity::after {
    bottom: 50px;
    margin-left: -20px;
    width: 40px;
    height: 40px;
    border-top-color: rgba(0, 0, 0, .2);
    border-bottom-color: rgba(0, 0, 0, .2);
    -webkit-animation: pace-theme-corner-indicator-spin 1s linear infinite;
    animation: pace-theme-corner-indicator-spin 1s linear infinite;
}

@-webkit-keyframes pace-theme-corner-indicator-spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(359deg); }
}
@keyframes pace-theme-corner-indicator-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); }
}

Bounce

.pace {
  width: 140px;
  height: 300px;
  position: fixed;
  top: -90px;
  right: -20px;
  z-index:;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  opacity:;
  -webkit-transition: all 2s linear 0s;
  -moz-transition: all 2s linear 0s;
  transition: all 2s linear 0s;
}

.pace.pace-active {
  -webkit-transform: scale(.25);
  -moz-transform: scale(.25);
  -ms-transform: scale(.25);
  -o-transform: scale(.25);
  transform: scale(.25);
  opacity:;
}

.pace .pace-activity {
  width: 140px;
  height: 140px;
  border-radius: 70px;
  background: #29d;
  position: absolute;
  top:;
  z-index:;
  -webkit-animation: pace-bounce 1s infinite;
  -moz-animation: pace-bounce 1s infinite;
  -o-animation: pace-bounce 1s infinite;
  -ms-animation: pace-bounce 1s infinite;
  animation: pace-bounce 1s infinite;
}

.pace .pace-progress {
  position: absolute;
  display: block;
  left: 50%;
  bottom:;
  z-index:;
  margin-left: -30px;
  width: 60px;
  height: 75px;
  background: rgba(20, 20, 20, .1);
  box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
  border-radius: 30px / 40px;
  -webkit-transform: scaleY(.3) !important;
  -moz-transform: scaleY(.3) !important;
  -ms-transform: scaleY(.3) !important;
  -o-transform: scaleY(.3) !important;
  transform: scaleY(.3) !important;
  -webkit-animation: pace-compress .5s infinite alternate;
  -moz-animation: pace-compress .5s infinite alternate;
  -o-animation: pace-compress .5s infinite alternate;
  -ms-animation: pace-compress .5s infinite alternate;
  animation: pace-compress .5s infinite alternate;
}

@-webkit-keyframes pace-bounce {
  0% {
    top:;
    -webkit-animation-timing-function: ease-in;
  }
  40% {}
  50% {
    top: 140px;
    height: 140px;
    -webkit-animation-timing-function: ease-out;
  }
  55% {
    top: 160px;
    height: 120px;
    border-radius: 70px / 60px;
    -webkit-animation-timing-function: ease-in;
  }
  65% {
    top: 120px;
    height: 140px;
    border-radius: 70px;
    -webkit-animation-timing-function: ease-out;
  }
  95% {
    top:;
    -webkit-animation-timing-function: ease-in;
  }
  100% {
    top:;
    -webkit-animation-timing-function: ease-in;
  }
}

@-moz-keyframes pace-bounce {
  0% {
    top:;
    -moz-animation-timing-function: ease-in;
  }
  40% {}
  50% {
    top: 140px;
    height: 140px;
    -moz-animation-timing-function: ease-out;
  }
  55% {
    top: 160px;
    height: 120px;
    border-radius: 70px / 60px;
    -moz-animation-timing-function: ease-in;
  }
  65% {
    top: 120px;
    height: 140px;
    border-radius: 70px;
    -moz-animation-timing-function: ease-out;}
  95% {
    top:;
    -moz-animation-timing-function: ease-in;
  }
  100% {;
    -moz-animation-timing-function: ease-in;
  }
}

@keyframes pace-bounce {
  0% {
    top:;
    animation-timing-function: ease-in;
  }
  50% {
    top: 140px;
    height: 140px;
    animation-timing-function: ease-out;
  }
  55% {
    top: 160px;
    height: 120px;
    border-radius: 70px / 60px;
    animation-timing-function: ease-in;
  }
  65% {
    top: 120px;
    height: 140px;
    border-radius: 70px;
    animation-timing-function: ease-out;
  }
  95% {
    top:;
    animation-timing-function: ease-in;
  }
  100% {
    top:;
    animation-timing-function: ease-in;
  }
}

@-webkit-keyframes pace-compress {
  0% {
    bottom:;
    margin-left: -30px;
    width: 60px;
    height: 75px;
    background: rgba(20, 20, 20, .1);
    box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
    border-radius: 30px / 40px;
    -webkit-animation-timing-function: ease-in;
  }
  100% {
    bottom: 30px;
    margin-left: -10px;
    width: 20px;
    height: 5px;
    background: rgba(20, 20, 20, .3);
    box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
    border-radius: 20px / 20px;
    -webkit-animation-timing-function: ease-out;
  }
}

@-moz-keyframes pace-compress {
  0% {
    bottom:;
    margin-left: -30px;
    width: 60px;
    height: 75px;
    background: rgba(20, 20, 20, .1);
    box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
    border-radius: 30px / 40px;
    -moz-animation-timing-function: ease-in;
  }
  100% {
    bottom: 30px;
    margin-left: -10px;
    width: 20px;
    height: 5px;
    background: rgba(20, 20, 20, .3);
    box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
    border-radius: 20px / 20px;
    -moz-animation-timing-function: ease-out;
  }
}

@keyframes pace-compress {
  0% {
    bottom:;
    margin-left: -30px;
    width: 60px;
    height: 75px;
    background: rgba(20, 20, 20, .1);
    box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
    border-radius: 30px / 40px;
    animation-timing-function: ease-in;
  }
  100% {
    bottom: 30px;
    margin-left: -10px;
    width: 20px;
    height: 5px;
    background: rgba(20, 20, 20, .3);
    box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
    border-radius: 20px / 20px;
    animation-timing-function: ease-out;
  }
}

Loading Bar

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;

  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;

  z-index:;
  position: fixed;
  margin: auto;
  top: 12px;
  left:;
  right:;
  bottom:;
  width: 200px;
  height: 50px;
  overflow: hidden;
}

.pace .pace-progress {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;

  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;

  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);

  display: block;
  position: absolute;
  right: 100%;
  margin-right: -7px;
  width: 93%;
  top: 7px;
  height: 14px;
  font-size: 12px;
  background: #29d;
  color: #29d;
  line-height: 60px;
  font-weight: bold;
  font-family: Helvetica, Arial, "Lucida Grande", sans-serif;

  -webkit-box-shadow: 120px 0 #fff, 240px 0 #fff;
  -ms-box-shadow: 120px 0 #fff, 240px 0 #fff;
  box-shadow: 120px 0 #fff, 240px 0 #fff;
}

.pace .pace-progress:after {
  content: attr(data-progress-text);
  display: inline-block;
  position: fixed;
  width: 45px;
  text-align: right;
  right:;
  padding-right: 16px;
  top: 4px;
}

.pace .pace-progress[data-progress-text="0%"]:after { right: -200px }
.pace .pace-progress[data-progress-text="1%"]:after { right: -198.14px }
.pace .pace-progress[data-progress-text="2%"]:after { right: -196.28px }
.pace .pace-progress[data-progress-text="3%"]:after { right: -194.42px }
.pace .pace-progress[data-progress-text="4%"]:after { right: -192.56px }
.pace .pace-progress[data-progress-text="5%"]:after { right: -190.7px }
.pace .pace-progress[data-progress-text="6%"]:after { right: -188.84px }
.pace .pace-progress[data-progress-text="7%"]:after { right: -186.98px }
.pace .pace-progress[data-progress-text="8%"]:after { right: -185.12px }
.pace .pace-progress[data-progress-text="9%"]:after { right: -183.26px }
.pace .pace-progress[data-progress-text="10%"]:after { right: -181.4px }
.pace .pace-progress[data-progress-text="11%"]:after { right: -179.54px }
.pace .pace-progress[data-progress-text="12%"]:after { right: -177.68px }
.pace .pace-progress[data-progress-text="13%"]:after { right: -175.82px }
.pace .pace-progress[data-progress-text="14%"]:after { right: -173.96px }
.pace .pace-progress[data-progress-text="15%"]:after { right: -172.1px }
.pace .pace-progress[data-progress-text="16%"]:after { right: -170.24px }
.pace .pace-progress[data-progress-text="17%"]:after { right: -168.38px }
.pace .pace-progress[data-progress-text="18%"]:after { right: -166.52px }
.pace .pace-progress[data-progress-text="19%"]:after { right: -164.66px }
.pace .pace-progress[data-progress-text="20%"]:after { right: -162.8px }
.pace .pace-progress[data-progress-text="21%"]:after { right: -160.94px }
.pace .pace-progress[data-progress-text="22%"]:after { right: -159.08px }
.pace .pace-progress[data-progress-text="23%"]:after { right: -157.22px }
.pace .pace-progress[data-progress-text="24%"]:after { right: -155.36px }
.pace .pace-progress[data-progress-text="25%"]:after { right: -153.5px }
.pace .pace-progress[data-progress-text="26%"]:after { right: -151.64px }
.pace .pace-progress[data-progress-text="27%"]:after { right: -149.78px }
.pace .pace-progress[data-progress-text="28%"]:after { right: -147.92px }
.pace .pace-progress[data-progress-text="29%"]:after { right: -146.06px }
.pace .pace-progress[data-progress-text="30%"]:after { right: -144.2px }
.pace .pace-progress[data-progress-text="31%"]:after { right: -142.34px }
.pace .pace-progress[data-progress-text="32%"]:after { right: -140.48px }
.pace .pace-progress[data-progress-text="33%"]:after { right: -138.62px }
.pace .pace-progress[data-progress-text="34%"]:after { right: -136.76px }
.pace .pace-progress[data-progress-text="35%"]:after { right: -134.9px }
.pace .pace-progress[data-progress-text="36%"]:after { right: -133.04px }
.pace .pace-progress[data-progress-text="37%"]:after { right: -131.18px }
.pace .pace-progress[data-progress-text="38%"]:after { right: -129.32px }
.pace .pace-progress[data-progress-text="39%"]:after { right: -127.46px }
.pace .pace-progress[data-progress-text="40%"]:after { right: -125.6px }
.pace .pace-progress[data-progress-text="41%"]:after { right: -123.74px }
.pace .pace-progress[data-progress-text="42%"]:after { right: -121.88px }
.pace .pace-progress[data-progress-text="43%"]:after { right: -120.02px }
.pace .pace-progress[data-progress-text="44%"]:after { right: -118.16px }
.pace .pace-progress[data-progress-text="45%"]:after { right: -116.3px }
.pace .pace-progress[data-progress-text="46%"]:after { right: -114.44px }
.pace .pace-progress[data-progress-text="47%"]:after { right: -112.58px }
.pace .pace-progress[data-progress-text="48%"]:after { right: -110.72px }
.pace .pace-progress[data-progress-text="49%"]:after { right: -108.86px }
.pace .pace-progress[data-progress-text="50%"]:after { right: -107px }
.pace .pace-progress[data-progress-text="51%"]:after { right: -105.14px }
.pace .pace-progress[data-progress-text="52%"]:after { right: -103.28px }
.pace .pace-progress[data-progress-text="53%"]:after { right: -101.42px }
.pace .pace-progress[data-progress-text="54%"]:after { right: -99.56px }
.pace .pace-progress[data-progress-text="55%"]:after { right: -97.7px }
.pace .pace-progress[data-progress-text="56%"]:after { right: -95.84px }
.pace .pace-progress[data-progress-text="57%"]:after { right: -93.98px }
.pace .pace-progress[data-progress-text="58%"]:after { right: -92.12px }
.pace .pace-progress[data-progress-text="59%"]:after { right: -90.26px }
.pace .pace-progress[data-progress-text="60%"]:after { right: -88.4px }
.pace .pace-progress[data-progress-text="61%"]:after { right: -86.53999999999999px }
.pace .pace-progress[data-progress-text="62%"]:after { right: -84.68px }
.pace .pace-progress[data-progress-text="63%"]:after { right: -82.82px }
.pace .pace-progress[data-progress-text="64%"]:after { right: -80.96000000000001px }
.pace .pace-progress[data-progress-text="65%"]:after { right: -79.1px }
.pace .pace-progress[data-progress-text="66%"]:after { right: -77.24px }
.pace .pace-progress[data-progress-text="67%"]:after { right: -75.38px }
.pace .pace-progress[data-progress-text="68%"]:after { right: -73.52px }
.pace .pace-progress[data-progress-text="69%"]:after { right: -71.66px }
.pace .pace-progress[data-progress-text="70%"]:after { right: -69.8px }
.pace .pace-progress[data-progress-text="71%"]:after { right: -67.94px }
.pace .pace-progress[data-progress-text="72%"]:after { right: -66.08px }
.pace .pace-progress[data-progress-text="73%"]:after { right: -64.22px }
.pace .pace-progress[data-progress-text="74%"]:after { right: -62.36px }
.pace .pace-progress[data-progress-text="75%"]:after { right: -60.5px }
.pace .pace-progress[data-progress-text="76%"]:after { right: -58.64px }
.pace .pace-progress[data-progress-text="77%"]:after { right: -56.78px }
.pace .pace-progress[data-progress-text="78%"]:after { right: -54.92px }
.pace .pace-progress[data-progress-text="79%"]:after { right: -53.06px }
.pace .pace-progress[data-progress-text="80%"]:after { right: -51.2px }
.pace .pace-progress[data-progress-text="81%"]:after { right: -49.34px }
.pace .pace-progress[data-progress-text="82%"]:after { right: -47.480000000000004px }
.pace .pace-progress[data-progress-text="83%"]:after { right: -45.62px }
.pace .pace-progress[data-progress-text="84%"]:after { right: -43.76px }
.pace .pace-progress[data-progress-text="85%"]:after { right: -41.9px }
.pace .pace-progress[data-progress-text="86%"]:after { right: -40.04px }
.pace .pace-progress[data-progress-text="87%"]:after { right: -38.18px }
.pace .pace-progress[data-progress-text="88%"]:after { right: -36.32px }
.pace .pace-progress[data-progress-text="89%"]:after { right: -34.46px }
.pace .pace-progress[data-progress-text="90%"]:after { right: -32.6px }
.pace .pace-progress[data-progress-text="91%"]:after { right: -30.740000000000002px }
.pace .pace-progress[data-progress-text="92%"]:after { right: -28.880000000000003px }
.pace .pace-progress[data-progress-text="93%"]:after { right: -27.02px }
.pace .pace-progress[data-progress-text="94%"]:after { right: -25.16px }
.pace .pace-progress[data-progress-text="95%"]:after { right: -23.3px }
.pace .pace-progress[data-progress-text="96%"]:after { right: -21.439999999999998px }
.pace .pace-progress[data-progress-text="97%"]:after { right: -19.58px }
.pace .pace-progress[data-progress-text="98%"]:after { right: -17.72px }
.pace .pace-progress[data-progress-text="99%"]:after { right: -15.86px }
.pace .pace-progress[data-progress-text="100%"]:after { right: -14px }

.pace .pace-activity {
  position: absolute;
  width: 100%;
  height: 28px;
  z-index:;
  box-shadow: inset 0 0 0 2px #29d, inset 0 0 0 7px #FFF;
  border-radius: 10px;
}

.pace.pace-inactive {
  display: none;
}

Center Circle

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

  -webkit-perspective: 12rem;
  -moz-perspective: 12rem;
  -ms-perspective: 12rem;
  -o-perspective: 12rem;
  perspective: 12rem;

  z-index:;
  position: fixed;
  height: 6rem;
  width: 6rem;
  margin: auto;
  top:;
  left:;
  right:;
  bottom:;
}

.pace.pace-inactive .pace-progress {
  display: none;
}

.pace .pace-progress {
  position: fixed;
  z-index:;
  display: block;
  position: absolute;
  left:;
  top:;
  height: 6rem;
  width: 6rem !important;
  line-height: 6rem;
  font-size: 2rem;
  border-radius: 50%;
  background: rgba(34, 153, 221, 0.8);
  color: #fff;
  font-family: "Helvetica Neue", sans-serif;
  font-weight:;
  text-align: center;

  -webkit-animation: pace-theme-center-circle-spin linear infinite 2s;
  -moz-animation: pace-theme-center-circle-spin linear infinite 2s;
  -ms-animation: pace-theme-center-circle-spin linear infinite 2s;
  -o-animation: pace-theme-center-circle-spin linear infinite 2s;
  animation: pace-theme-center-circle-spin linear infinite 2s;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.pace .pace-progress:after {
  content: attr(data-progress-text);
  display: block;
}

@-webkit-keyframes pace-theme-center-circle-spin {
  from { -webkit-transform: rotateY(0deg) }
  to { -webkit-transform: rotateY(360deg) }
}

@-moz-keyframes pace-theme-center-circle-spin {
  from { -moz-transform: rotateY(0deg) }
  to { -moz-transform: rotateY(360deg) }
}

@-ms-keyframes pace-theme-center-circle-spin {
  from { -ms-transform: rotateY(0deg) }
  to { -ms-transform: rotateY(360deg) }
}

@-o-keyframes pace-theme-center-circle-spin {
  from { -o-transform: rotateY(0deg) }
  to { -o-transform: rotateY(360deg) }
}

@keyframes pace-theme-center-circle-spin {
  from { transform: rotateY(0deg) }
  to { transform: rotateY(360deg) }
}

Center Atom

.pace.pace-inactive {
  display: none;
}

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

  z-index:;
  position: fixed;
  height: 60px;
  width: 100px;
  margin: auto;
  top:;
  left:;
  right:;
  bottom:;
}

.pace .pace-progress {
  z-index:;
  position: absolute;
  height: 60px;
  width: 100px;

  -webkit-transform: translate3d(0, 0, 0) !important;
  -ms-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}

.pace .pace-progress:before {
  content: attr(data-progress-text);
  text-align: center;
  color: #fff;
  background: #29d;
  border-radius: 50%;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 14px;
  font-weight:;
  line-height:;
  padding: 20% 0 7px;
  width: 50%;
  height: 40%;
  margin: 10px 0 0 30px;
  display: block;
  z-index:;
  position: absolute;
}

.pace .pace-activity {
  font-size: 15px;
  line-height:;
  z-index:;
  position: absolute;
  height: 60px;
  width: 100px;

  display: block;
  -webkit-animation: pace-theme-center-atom-spin 2s linear infinite;
  -moz-animation: pace-theme-center-atom-spin 2s linear infinite;
  -o-animation: pace-theme-center-atom-spin 2s linear infinite;
  animation: pace-theme-center-atom-spin 2s linear infinite;
}

.pace .pace-activity {
  border-radius: 50%;
  border: 5px solid #29d;
  content: ' ';
  display: block;
  position: absolute;
  top:;
  left:;
  height: 60px;
  width: 100px;
}

.pace .pace-activity:after {
  border-radius: 50%;
  border: 5px solid #29d;
  content: ' ';
  display: block;
  position: absolute;
  top: -5px;
  left: -5px;
  height: 60px;
  width: 100px;

  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  transform: rotate(60deg);
}

.pace .pace-activity:before {
  border-radius: 50%;
  border: 5px solid #29d;
  content: ' ';
  display: block;
  position: absolute;
  top: -5px;
  left: -5px;
  height: 60px;
  width: 100px;

  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -o-transform: rotate(120deg);
  transform: rotate(120deg);
}

@-webkit-keyframes pace-theme-center-atom-spin {
  0%   { -webkit-transform: rotate(0deg) }
  100% { -webkit-transform: rotate(359deg) }
}
@-moz-keyframes pace-theme-center-atom-spin {
  0%   { -moz-transform: rotate(0deg) }
  100% { -moz-transform: rotate(359deg) }
}
@-o-keyframes pace-theme-center-atom-spin {
  0%   { -o-transform: rotate(0deg) }
  100% { -o-transform: rotate(359deg) }
}
@keyframes pace-theme-center-atom-spin {
  0%   { transform: rotate(0deg) }
  100% { transform: rotate(359deg) }
}

Center Radar

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

  z-index:;
  position: fixed;
  height: 90px;
  width: 90px;
  margin: auto;
  top:;
  left:;
  right:;
  bottom:;
}

.pace.pace-inactive .pace-activity {
  display: none;
}

.pace .pace-activity {
  position: fixed;
  z-index:;
  display: block;
  position: absolute;
  left: -30px;
  top: -30px;
  height: 90px;
  width: 90px;
  display: block;
  border-width: 30px;
  border-style: double;
  border-color: #29d transparent transparent;
  border-radius: 50%;

  -webkit-animation: spin 1s linear infinite;
  -moz-animation: spin 1s linear infinite;
  -o-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}

.pace .pace-activity:before {
  content: ' ';
  position: absolute;
  top: 10px;
  left: 10px;
  height: 50px;
  width: 50px;
  display: block;
  border-width: 10px;
  border-style: solid;
  border-color: #29d transparent transparent;
  border-radius: 50%;
}

@-webkit-keyframes spin {
  100% { -webkit-transform: rotate(359deg); }
}

@-moz-keyframes spin {
  100% { -moz-transform: rotate(359deg); }
}

@-o-keyframes spin {
  100% { -moz-transform: rotate(359deg); }
}

@keyframes spin {
  100% {  transform: rotate(359deg); }
}

Center Simple

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

  z-index:;
  position: fixed;
  margin: auto;
  top:;
  left:;
  right:;
  bottom:;
  height: 5px;
  width: 200px;
  background: #fff;
  border: 1px solid #29d;

  overflow: hidden;
}

.pace .pace-progress {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);

  max-width: 200px;
  position: fixed;
  z-index:;
  display: block;
  position: absolute;
  top:;
  right: 100%;
  height: 100%;
  width: 100%;
  background: #29d;
}

.pace.pace-inactive {
  display: none;
}

Flash
.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: #29d;  position: fixed;  z-index: 2000;  top: 0;  right: 100%;  width: 100%;  height: 2px;}
.pace .pace-progress-inner {  display: block;  position: absolute;  right: 0px;  width: 100px;  height: 100%;  box-shadow: 0 0 10px #29d, 0 0 5px #29d;  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: 2000;  top: 15px;  right: 15px;  width: 14px;  height: 14px;  border: solid 2px transparent;  border-top-color: #29d;  border-left-color: #29d;  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); }}

Barber Shop

.pace {  -webkit-pointer-events: none;  pointer-events: none;
  -webkit-user-select: none;  -moz-user-select: none;  user-select: none;
  overflow: hidden;  position: fixed;  top: 0;  left: 0;  z-index: 2000;  width: 100%;  height: 12px;  background: #fff;}
.pace-inactive {  display: none;}
.pace .pace-progress {  background-color: #29d;  position: fixed;  top: 0;  bottom: 0;  right: 100%;  width: 100%;  overflow: hidden;}
.pace .pace-activity {  position: fixed;  top: 0;  right: -32px;  bottom: 0;  left: 0;
  -webkit-transform: translate3d(0, 0, 0);  -moz-transform: translate3d(0, 0, 0);  -ms-transform: translate3d(0, 0, 0);  -o-transform: translate3d(0, 0, 0);  transform: translate3d(0, 0, 0);
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);  -webkit-background-size: 32px 32px;  -moz-background-size: 32px 32px;  -o-background-size: 32px 32px;  background-size: 32px 32px;
  -webkit-animation: pace-theme-barber-shop-motion 500ms linear infinite;  -moz-animation: pace-theme-barber-shop-motion 500ms linear infinite;  -ms-animation: pace-theme-barber-shop-motion 500ms linear infinite;  -o-animation: pace-theme-barber-shop-motion 500ms linear infinite;  animation: pace-theme-barber-shop-motion 500ms linear infinite;}
@-webkit-keyframes pace-theme-barber-shop-motion {  0% { -webkit-transform: none; transform: none; }  100% { -webkit-transform: translate(-32px, 0); transform: translate(-32px, 0); }}@-moz-keyframes pace-theme-barber-shop-motion {  0% { -moz-transform: none; transform: none; }  100% { -moz-transform: translate(-32px, 0); transform: translate(-32px, 0); }}@-o-keyframes pace-theme-barber-shop-motion {  0% { -o-transform: none; transform: none; }  100% { -o-transform: translate(-32px, 0); transform: translate(-32px, 0); }}@-ms-keyframes pace-theme-barber-shop-motion {  0% { -ms-transform: none; transform: none; }  100% { -ms-transform: translate(-32px, 0); transform: translate(-32px, 0); }}@keyframes pace-theme-barber-shop-motion {  0% { transform: none; transform: none; }  100% { transform: translate(-32px, 0); transform: translate(-32px, 0); }}

Mac OSX

.pace {  -webkit-pointer-events: none;  pointer-events: none;
  -webkit-user-select: none;  -moz-user-select: none;  user-select: none;
  overflow: hidden;  position: fixed;  top: 0;  left: 0;  z-index: 2000;  width: 100%;  height: 12px;  background: #fff;}
.pace-inactive {  display: none;}
.pace .pace-progress {  background-color: #0087E1;  position: fixed;  top: 0;  right: 100%;  width: 100%;  height: 12px;  overflow: hidden;
  -webkit-border-radius: 0 0 4px 0;  -moz-border-radius: 0 0 4px 0;  -o-border-radius: 0 0 4px 0;  border-radius: 0 0 4px 0;
  -webkit-box-shadow: inset -1px 0 #00558F, inset 0 -1px #00558F, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3);  -moz-box-shadow: inset -1px 0 #00558F, inset 0 -1px #00558F, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3);  -o-box-shadow: inset -1px 0 #00558F, inset 0 -1px #00558F, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3);  box-shadow: inset -1px 0 #00558F, inset 0 -1px #00558F, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3);}
.pace .pace-activity {  position: fixed;  top: 0;  left: 0;  right: -28px;  bottom: 0;
  -webkit-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%);  -moz-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%);  -o-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%);  background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%);
  -webkit-background-size: 28px 100%;  -moz-background-size: 28px 100%;  -o-background-size: 28px 100%;  background-size: 28px 100%;
  -webkit-animation: pace-theme-mac-osx-motion 500ms linear infinite;  -moz-animation: pace-theme-mac-osx-motion 500ms linear infinite;  -ms-animation: pace-theme-mac-osx-motion 500ms linear infinite;  -o-animation: pace-theme-mac-osx-motion 500ms linear infinite;  animation: pace-theme-mac-osx-motion 500ms linear infinite;}
@-webkit-keyframes pace-theme-mac-osx-motion {  0% { -webkit-transform: none; transform: none; }  100% { -webkit-transform: translate(-28px, 0); transform: translate(-28px, 0); }}@-moz-keyframes pace-theme-mac-osx-motion {  0% { -moz-transform: none; transform: none; }  100% { -moz-transform: translate(-28px, 0); transform: translate(-28px, 0); }}@-o-keyframes pace-theme-mac-osx-motion {  0% { -o-transform: none; transform: none; }  100% { -o-transform: translate(-28px, 0); transform: translate(-28px, 0); }}@-ms-keyframes pace-theme-mac-osx-motion {  0% { -ms-transform: none; transform: none; }  100% { -ms-transform: translate(-28px, 0); transform: translate(-28px, 0); }}@keyframes pace-theme-mac-osx-motion {  0% { transform: none; transform: none; }  100% { transform: translate(-28px, 0); transform: translate(-28px, 0); }}

Fill Left
.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-color: rgba(0, 0, 0, 0.19999999999999996);  position: fixed;  z-index: -1;  top: 0;  right: 100%;  bottom: 0;  width: 100%;}

Flat Top
.pace {  -webkit-pointer-events: none;  pointer-events: none;
  -webkit-user-select: none;  -moz-user-select: none;  user-select: none;
  position: fixed;  top: 0;  left: 0;  width: 100%;
  -webkit-transform: translate3d(0, -50px, 0);  -ms-transform: translate3d(0, -50px, 0);  transform: translate3d(0, -50px, 0);
  -webkit-transition: -webkit-transform .5s ease-out;  -ms-transition: -webkit-transform .5s ease-out;  transition: transform .5s ease-out;}
.pace.pace-active {  -webkit-transform: translate3d(0, 0, 0);  -ms-transform: translate3d(0, 0, 0);  transform: translate3d(0, 0, 0);}
.pace .pace-progress {  display: block;  position: fixed;  z-index: 2000;  top: 0;  right: 100%;  width: 100%;  height: 10px;  background: #29d;
  pointer-events: none;}

Big Counter
.pace {  -webkit-pointer-events: none;  pointer-events: none;
  -webkit-user-select: none;  -moz-user-select: none;  user-select: none;}
.pace.pace-inactive .pace-progress {  display: none;}
.pace .pace-progress {  position: fixed;  z-index: 2000;  top: 0;  right: 0;  height: 5rem;  width: 5rem;
  -webkit-transform: translate3d(0, 0, 0) !important;  -ms-transform: translate3d(0, 0, 0) !important;  transform: translate3d(0, 0, 0) !important;}
.pace .pace-progress:after {  display: block;  position: absolute;  top: 0;  right: .5rem;  content: attr(data-progress-text);  font-family: "Helvetica Neue", sans-serif;  font-weight: 100;  font-size: 5rem;  line-height: 1;  text-align: right;  color: rgba(0, 0, 0, 0.19999999999999996);}

Corner Indicator
.pace {  -webkit-pointer-events: none;  pointer-events: none;
  -webkit-user-select: none;  -moz-user-select: none;  user-select: none;}
.pace .pace-activity {  display: block;  position: fixed;  z-index: 2000;  top: 0;  right: 0;  width: 300px;  height: 300px;  background: #29d;  -webkit-transition: -webkit-transform 0.3s;  transition: transform 0.3s;  -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg);  transform: translateX(100%) translateY(-100%) rotate(45deg);  pointer-events: none;}
.pace.pace-active .pace-activity {  -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg);  transform: translateX(50%) translateY(-50%) rotate(45deg);}
.pace .pace-activity::before,.pace .pace-activity::after {    -moz-box-sizing: border-box;    box-sizing: border-box;    position: absolute;    bottom: 30px;    left: 50%;    display: block;    border: 5px solid #fff;    border-radius: 50%;    content: '';}
.pace .pace-activity::before {    margin-left: -40px;    width: 80px;    height: 80px;    border-right-color: rgba(0, 0, 0, .2);    border-left-color: rgba(0, 0, 0, .2);    -webkit-animation: pace-theme-corner-indicator-spin 3s linear infinite;    animation: pace-theme-corner-indicator-spin 3s linear infinite;}
.pace .pace-activity::after {    bottom: 50px;    margin-left: -20px;    width: 40px;    height: 40px;    border-top-color: rgba(0, 0, 0, .2);    border-bottom-color: rgba(0, 0, 0, .2);    -webkit-animation: pace-theme-corner-indicator-spin 1s linear infinite;    animation: pace-theme-corner-indicator-spin 1s linear infinite;}
@-webkit-keyframes pace-theme-corner-indicator-spin {  0% { -webkit-transform: rotate(0deg); }  100% { -webkit-transform: rotate(359deg); }}@keyframes pace-theme-corner-indicator-spin {  0% { transform: rotate(0deg); }  100% { transform: rotate(359deg); }}

Bounce
.pace {  width: 140px;  height: 300px;  position: fixed;  top: -90px;  right: -20px;  z-index: 2000;  -webkit-transform: scale(0);  -moz-transform: scale(0);  -ms-transform: scale(0);  -o-transform: scale(0);  transform: scale(0);  opacity: 0;  -webkit-transition: all 2s linear 0s;  -moz-transition: all 2s linear 0s;  transition: all 2s linear 0s;}
.pace.pace-active {  -webkit-transform: scale(.25);  -moz-transform: scale(.25);  -ms-transform: scale(.25);  -o-transform: scale(.25);  transform: scale(.25);  opacity: 1;}
.pace .pace-activity {  width: 140px;  height: 140px;  border-radius: 70px;  background: #29d;  position: absolute;  top: 0;  z-index: 1911;  -webkit-animation: pace-bounce 1s infinite;  -moz-animation: pace-bounce 1s infinite;  -o-animation: pace-bounce 1s infinite;  -ms-animation: pace-bounce 1s infinite;  animation: pace-bounce 1s infinite;}
.pace .pace-progress {  position: absolute;  display: block;  left: 50%;  bottom: 0;  z-index: 1910;  margin-left: -30px;  width: 60px;  height: 75px;  background: rgba(20, 20, 20, .1);  box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);  border-radius: 30px / 40px;  -webkit-transform: scaleY(.3) !important;  -moz-transform: scaleY(.3) !important;  -ms-transform: scaleY(.3) !important;  -o-transform: scaleY(.3) !important;  transform: scaleY(.3) !important;  -webkit-animation: pace-compress .5s infinite alternate;  -moz-animation: pace-compress .5s infinite alternate;  -o-animation: pace-compress .5s infinite alternate;  -ms-animation: pace-compress .5s infinite alternate;  animation: pace-compress .5s infinite alternate;}
@-webkit-keyframes pace-bounce {  0% {    top: 0;    -webkit-animation-timing-function: ease-in;  }  40% {}  50% {    top: 140px;    height: 140px;    -webkit-animation-timing-function: ease-out;  }  55% {    top: 160px;    height: 120px;    border-radius: 70px / 60px;    -webkit-animation-timing-function: ease-in;  }  65% {    top: 120px;    height: 140px;    border-radius: 70px;    -webkit-animation-timing-function: ease-out;  }  95% {    top: 0;    -webkit-animation-timing-function: ease-in;  }  100% {    top: 0;    -webkit-animation-timing-function: ease-in;  }}
@-moz-keyframes pace-bounce {  0% {    top: 0;    -moz-animation-timing-function: ease-in;  }  40% {}  50% {    top: 140px;    height: 140px;    -moz-animation-timing-function: ease-out;  }  55% {    top: 160px;    height: 120px;    border-radius: 70px / 60px;    -moz-animation-timing-function: ease-in;  }  65% {    top: 120px;    height: 140px;    border-radius: 70px;    -moz-animation-timing-function: ease-out;}  95% {    top: 0;    -moz-animation-timing-function: ease-in;  }  100% {top: 0;    -moz-animation-timing-function: ease-in;  }}
@keyframes pace-bounce {  0% {    top: 0;    animation-timing-function: ease-in;  }  50% {    top: 140px;    height: 140px;    animation-timing-function: ease-out;  }  55% {    top: 160px;    height: 120px;    border-radius: 70px / 60px;    animation-timing-function: ease-in;  }  65% {    top: 120px;    height: 140px;    border-radius: 70px;    animation-timing-function: ease-out;  }  95% {    top: 0;    animation-timing-function: ease-in;  }  100% {    top: 0;    animation-timing-function: ease-in;  }}
@-webkit-keyframes pace-compress {  0% {    bottom: 0;    margin-left: -30px;    width: 60px;    height: 75px;    background: rgba(20, 20, 20, .1);    box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);    border-radius: 30px / 40px;    -webkit-animation-timing-function: ease-in;  }  100% {    bottom: 30px;    margin-left: -10px;    width: 20px;    height: 5px;    background: rgba(20, 20, 20, .3);    box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);    border-radius: 20px / 20px;    -webkit-animation-timing-function: ease-out;  }}
@-moz-keyframes pace-compress {  0% {    bottom: 0;    margin-left: -30px;    width: 60px;    height: 75px;    background: rgba(20, 20, 20, .1);    box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);    border-radius: 30px / 40px;    -moz-animation-timing-function: ease-in;  }  100% {    bottom: 30px;    margin-left: -10px;    width: 20px;    height: 5px;    background: rgba(20, 20, 20, .3);    box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);    border-radius: 20px / 20px;    -moz-animation-timing-function: ease-out;  }}
@keyframes pace-compress {  0% {    bottom: 0;    margin-left: -30px;    width: 60px;    height: 75px;    background: rgba(20, 20, 20, .1);    box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);    border-radius: 30px / 40px;    animation-timing-function: ease-in;  }  100% {    bottom: 30px;    margin-left: -10px;    width: 20px;    height: 5px;    background: rgba(20, 20, 20, .3);    box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);    border-radius: 20px / 20px;    animation-timing-function: ease-out;  }}

Loading Bar

.pace {  -webkit-pointer-events: none;  pointer-events: none;
  -webkit-user-select: none;  -moz-user-select: none;  user-select: none;
  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  -ms-box-sizing: border-box;  -o-box-sizing: border-box;  box-sizing: border-box;
  -webkit-border-radius: 10px;  -moz-border-radius: 10px;  border-radius: 10px;
  -webkit-background-clip: padding-box;  -moz-background-clip: padding;  background-clip: padding-box;
  z-index: 2000;  position: fixed;  margin: auto;  top: 12px;  left: 0;  right: 0;  bottom: 0;  width: 200px;  height: 50px;  overflow: hidden;}
.pace .pace-progress {  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  -ms-box-sizing: border-box;  -o-box-sizing: border-box;  box-sizing: border-box;
  -webkit-border-radius: 2px;  -moz-border-radius: 2px;  border-radius: 2px;
  -webkit-background-clip: padding-box;  -moz-background-clip: padding;  background-clip: padding-box;
  -webkit-transform: translate3d(0, 0, 0);  transform: translate3d(0, 0, 0);
  display: block;  position: absolute;  right: 100%;  margin-right: -7px;  width: 93%;  top: 7px;  height: 14px;  font-size: 12px;  background: #29d;  color: #29d;  line-height: 60px;  font-weight: bold;  font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
  -webkit-box-shadow: 120px 0 #fff, 240px 0 #fff;  -ms-box-shadow: 120px 0 #fff, 240px 0 #fff;  box-shadow: 120px 0 #fff, 240px 0 #fff;}
.pace .pace-progress:after {  content: attr(data-progress-text);  display: inline-block;  position: fixed;  width: 45px;  text-align: right;  right: 0;  padding-right: 16px;  top: 4px;}
.pace .pace-progress[data-progress-text="0%"]:after { right: -200px }.pace .pace-progress[data-progress-text="1%"]:after { right: -198.14px }.pace .pace-progress[data-progress-text="2%"]:after { right: -196.28px }.pace .pace-progress[data-progress-text="3%"]:after { right: -194.42px }.pace .pace-progress[data-progress-text="4%"]:after { right: -192.56px }.pace .pace-progress[data-progress-text="5%"]:after { right: -190.7px }.pace .pace-progress[data-progress-text="6%"]:after { right: -188.84px }.pace .pace-progress[data-progress-text="7%"]:after { right: -186.98px }.pace .pace-progress[data-progress-text="8%"]:after { right: -185.12px }.pace .pace-progress[data-progress-text="9%"]:after { right: -183.26px }.pace .pace-progress[data-progress-text="10%"]:after { right: -181.4px }.pace .pace-progress[data-progress-text="11%"]:after { right: -179.54px }.pace .pace-progress[data-progress-text="12%"]:after { right: -177.68px }.pace .pace-progress[data-progress-text="13%"]:after { right: -175.82px }.pace .pace-progress[data-progress-text="14%"]:after { right: -173.96px }.pace .pace-progress[data-progress-text="15%"]:after { right: -172.1px }.pace .pace-progress[data-progress-text="16%"]:after { right: -170.24px }.pace .pace-progress[data-progress-text="17%"]:after { right: -168.38px }.pace .pace-progress[data-progress-text="18%"]:after { right: -166.52px }.pace .pace-progress[data-progress-text="19%"]:after { right: -164.66px }.pace .pace-progress[data-progress-text="20%"]:after { right: -162.8px }.pace .pace-progress[data-progress-text="21%"]:after { right: -160.94px }.pace .pace-progress[data-progress-text="22%"]:after { right: -159.08px }.pace .pace-progress[data-progress-text="23%"]:after { right: -157.22px }.pace .pace-progress[data-progress-text="24%"]:after { right: -155.36px }.pace .pace-progress[data-progress-text="25%"]:after { right: -153.5px }.pace .pace-progress[data-progress-text="26%"]:after { right: -151.64px }.pace .pace-progress[data-progress-text="27%"]:after { right: -149.78px }.pace .pace-progress[data-progress-text="28%"]:after { right: -147.92px }.pace .pace-progress[data-progress-text="29%"]:after { right: -146.06px }.pace .pace-progress[data-progress-text="30%"]:after { right: -144.2px }.pace .pace-progress[data-progress-text="31%"]:after { right: -142.34px }.pace .pace-progress[data-progress-text="32%"]:after { right: -140.48px }.pace .pace-progress[data-progress-text="33%"]:after { right: -138.62px }.pace .pace-progress[data-progress-text="34%"]:after { right: -136.76px }.pace .pace-progress[data-progress-text="35%"]:after { right: -134.9px }.pace .pace-progress[data-progress-text="36%"]:after { right: -133.04px }.pace .pace-progress[data-progress-text="37%"]:after { right: -131.18px }.pace .pace-progress[data-progress-text="38%"]:after { right: -129.32px }.pace .pace-progress[data-progress-text="39%"]:after { right: -127.46px }.pace .pace-progress[data-progress-text="40%"]:after { right: -125.6px }.pace .pace-progress[data-progress-text="41%"]:after { right: -123.74px }.pace .pace-progress[data-progress-text="42%"]:after { right: -121.88px }.pace .pace-progress[data-progress-text="43%"]:after { right: -120.02px }.pace .pace-progress[data-progress-text="44%"]:after { right: -118.16px }.pace .pace-progress[data-progress-text="45%"]:after { right: -116.3px }.pace .pace-progress[data-progress-text="46%"]:after { right: -114.44px }.pace .pace-progress[data-progress-text="47%"]:after { right: -112.58px }.pace .pace-progress[data-progress-text="48%"]:after { right: -110.72px }.pace .pace-progress[data-progress-text="49%"]:after { right: -108.86px }.pace .pace-progress[data-progress-text="50%"]:after { right: -107px }.pace .pace-progress[data-progress-text="51%"]:after { right: -105.14px }.pace .pace-progress[data-progress-text="52%"]:after { right: -103.28px }.pace .pace-progress[data-progress-text="53%"]:after { right: -101.42px }.pace .pace-progress[data-progress-text="54%"]:after { right: -99.56px }.pace .pace-progress[data-progress-text="55%"]:after { right: -97.7px }.pace .pace-progress[data-progress-text="56%"]:after { right: -95.84px }.pace .pace-progress[data-progress-text="57%"]:after { right: -93.98px }.pace .pace-progress[data-progress-text="58%"]:after { right: -92.12px }.pace .pace-progress[data-progress-text="59%"]:after { right: -90.26px }.pace .pace-progress[data-progress-text="60%"]:after { right: -88.4px }.pace .pace-progress[data-progress-text="61%"]:after { right: -86.53999999999999px }.pace .pace-progress[data-progress-text="62%"]:after { right: -84.68px }.pace .pace-progress[data-progress-text="63%"]:after { right: -82.82px }.pace .pace-progress[data-progress-text="64%"]:after { right: -80.96000000000001px }.pace .pace-progress[data-progress-text="65%"]:after { right: -79.1px }.pace .pace-progress[data-progress-text="66%"]:after { right: -77.24px }.pace .pace-progress[data-progress-text="67%"]:after { right: -75.38px }.pace .pace-progress[data-progress-text="68%"]:after { right: -73.52px }.pace .pace-progress[data-progress-text="69%"]:after { right: -71.66px }.pace .pace-progress[data-progress-text="70%"]:after { right: -69.8px }.pace .pace-progress[data-progress-text="71%"]:after { right: -67.94px }.pace .pace-progress[data-progress-text="72%"]:after { right: -66.08px }.pace .pace-progress[data-progress-text="73%"]:after { right: -64.22px }.pace .pace-progress[data-progress-text="74%"]:after { right: -62.36px }.pace .pace-progress[data-progress-text="75%"]:after { right: -60.5px }.pace .pace-progress[data-progress-text="76%"]:after { right: -58.64px }.pace .pace-progress[data-progress-text="77%"]:after { right: -56.78px }.pace .pace-progress[data-progress-text="78%"]:after { right: -54.92px }.pace .pace-progress[data-progress-text="79%"]:after { right: -53.06px }.pace .pace-progress[data-progress-text="80%"]:after { right: -51.2px }.pace .pace-progress[data-progress-text="81%"]:after { right: -49.34px }.pace .pace-progress[data-progress-text="82%"]:after { right: -47.480000000000004px }.pace .pace-progress[data-progress-text="83%"]:after { right: -45.62px }.pace .pace-progress[data-progress-text="84%"]:after { right: -43.76px }.pace .pace-progress[data-progress-text="85%"]:after { right: -41.9px }.pace .pace-progress[data-progress-text="86%"]:after { right: -40.04px }.pace .pace-progress[data-progress-text="87%"]:after { right: -38.18px }.pace .pace-progress[data-progress-text="88%"]:after { right: -36.32px }.pace .pace-progress[data-progress-text="89%"]:after { right: -34.46px }.pace .pace-progress[data-progress-text="90%"]:after { right: -32.6px }.pace .pace-progress[data-progress-text="91%"]:after { right: -30.740000000000002px }.pace .pace-progress[data-progress-text="92%"]:after { right: -28.880000000000003px }.pace .pace-progress[data-progress-text="93%"]:after { right: -27.02px }.pace .pace-progress[data-progress-text="94%"]:after { right: -25.16px }.pace .pace-progress[data-progress-text="95%"]:after { right: -23.3px }.pace .pace-progress[data-progress-text="96%"]:after { right: -21.439999999999998px }.pace .pace-progress[data-progress-text="97%"]:after { right: -19.58px }.pace .pace-progress[data-progress-text="98%"]:after { right: -17.72px }.pace .pace-progress[data-progress-text="99%"]:after { right: -15.86px }.pace .pace-progress[data-progress-text="100%"]:after { right: -14px }

.pace .pace-activity {  position: absolute;  width: 100%;  height: 28px;  z-index: 2001;  box-shadow: inset 0 0 0 2px #29d, inset 0 0 0 7px #FFF;  border-radius: 10px;}
.pace.pace-inactive {  display: none;}

Center Circle
.pace {  -webkit-pointer-events: none;  pointer-events: none;
  -webkit-user-select: none;  -moz-user-select: none;  user-select: none;
  -webkit-perspective: 12rem;  -moz-perspective: 12rem;  -ms-perspective: 12rem;  -o-perspective: 12rem;  perspective: 12rem;
  z-index: 2000;  position: fixed;  height: 6rem;  width: 6rem;  margin: auto;  top: 0;  left: 0;  right: 0;  bottom: 0;}
.pace.pace-inactive .pace-progress {  display: none;}
.pace .pace-progress {  position: fixed;  z-index: 2000;  display: block;  position: absolute;  left: 0;  top: 0;  height: 6rem;  width: 6rem !important;  line-height: 6rem;  font-size: 2rem;  border-radius: 50%;  background: rgba(34, 153, 221, 0.8);  color: #fff;  font-family: "Helvetica Neue", sans-serif;  font-weight: 100;  text-align: center;
  -webkit-animation: pace-theme-center-circle-spin linear infinite 2s;  -moz-animation: pace-theme-center-circle-spin linear infinite 2s;  -ms-animation: pace-theme-center-circle-spin linear infinite 2s;  -o-animation: pace-theme-center-circle-spin linear infinite 2s;  animation: pace-theme-center-circle-spin linear infinite 2s;
  -webkit-transform-style: preserve-3d;  -moz-transform-style: preserve-3d;  -ms-transform-style: preserve-3d;  -o-transform-style: preserve-3d;  transform-style: preserve-3d;}
.pace .pace-progress:after {  content: attr(data-progress-text);  display: block;}
@-webkit-keyframes pace-theme-center-circle-spin {  from { -webkit-transform: rotateY(0deg) }  to { -webkit-transform: rotateY(360deg) }}
@-moz-keyframes pace-theme-center-circle-spin {  from { -moz-transform: rotateY(0deg) }  to { -moz-transform: rotateY(360deg) }}
@-ms-keyframes pace-theme-center-circle-spin {  from { -ms-transform: rotateY(0deg) }  to { -ms-transform: rotateY(360deg) }}
@-o-keyframes pace-theme-center-circle-spin {  from { -o-transform: rotateY(0deg) }  to { -o-transform: rotateY(360deg) }}
@keyframes pace-theme-center-circle-spin {  from { transform: rotateY(0deg) }  to { transform: rotateY(360deg) }}

Center Atom
.pace.pace-inactive {  display: none;}
.pace {  -webkit-pointer-events: none;  pointer-events: none;
  -webkit-user-select: none;  -moz-user-select: none;  user-select: none;
  z-index: 2000;  position: fixed;  height: 60px;  width: 100px;  margin: auto;  top: 0;  left: 0;  right: 0;  bottom: 0;}
.pace .pace-progress {  z-index: 2000;  position: absolute;  height: 60px;  width: 100px;
  -webkit-transform: translate3d(0, 0, 0) !important;  -ms-transform: translate3d(0, 0, 0) !important;  transform: translate3d(0, 0, 0) !important;}
.pace .pace-progress:before {  content: attr(data-progress-text);  text-align: center;  color: #fff;  background: #29d;  border-radius: 50%;  font-family: "Helvetica Neue", sans-serif;  font-size: 14px;  font-weight: 100;  line-height: 1;  padding: 20% 0 7px;  width: 50%;  height: 40%;  margin: 10px 0 0 30px;  display: block;  z-index: 999;  position: absolute;}
.pace .pace-activity {  font-size: 15px;  line-height: 1;  z-index: 2000;  position: absolute;  height: 60px;  width: 100px;
  display: block;  -webkit-animation: pace-theme-center-atom-spin 2s linear infinite;  -moz-animation: pace-theme-center-atom-spin 2s linear infinite;  -o-animation: pace-theme-center-atom-spin 2s linear infinite;  animation: pace-theme-center-atom-spin 2s linear infinite;}
.pace .pace-activity {  border-radius: 50%;  border: 5px solid #29d;  content: ' ';  display: block;  position: absolute;  top: 0;  left: 0;  height: 60px;  width: 100px;}
.pace .pace-activity:after {  border-radius: 50%;  border: 5px solid #29d;  content: ' ';  display: block;  position: absolute;  top: -5px;  left: -5px;  height: 60px;  width: 100px;
  -webkit-transform: rotate(60deg);  -moz-transform: rotate(60deg);  -o-transform: rotate(60deg);  transform: rotate(60deg);}
.pace .pace-activity:before {  border-radius: 50%;  border: 5px solid #29d;  content: ' ';  display: block;  position: absolute;  top: -5px;  left: -5px;  height: 60px;  width: 100px;
  -webkit-transform: rotate(120deg);  -moz-transform: rotate(120deg);  -o-transform: rotate(120deg);  transform: rotate(120deg);}
@-webkit-keyframes pace-theme-center-atom-spin {  0%   { -webkit-transform: rotate(0deg) }  100% { -webkit-transform: rotate(359deg) }}@-moz-keyframes pace-theme-center-atom-spin {  0%   { -moz-transform: rotate(0deg) }  100% { -moz-transform: rotate(359deg) }}@-o-keyframes pace-theme-center-atom-spin {  0%   { -o-transform: rotate(0deg) }  100% { -o-transform: rotate(359deg) }}@keyframes pace-theme-center-atom-spin {  0%   { transform: rotate(0deg) }  100% { transform: rotate(359deg) }}

Center Radar
.pace {  -webkit-pointer-events: none;  pointer-events: none;
  -webkit-user-select: none;  -moz-user-select: none;  user-select: none;
  z-index: 2000;  position: fixed;  height: 90px;  width: 90px;  margin: auto;  top: 0;  left: 0;  right: 0;  bottom: 0;}
.pace.pace-inactive .pace-activity {  display: none;}
.pace .pace-activity {  position: fixed;  z-index: 2000;  display: block;  position: absolute;  left: -30px;  top: -30px;  height: 90px;  width: 90px;  display: block;  border-width: 30px;  border-style: double;  border-color: #29d transparent transparent;  border-radius: 50%;
  -webkit-animation: spin 1s linear infinite;  -moz-animation: spin 1s linear infinite;  -o-animation: spin 1s linear infinite;  animation: spin 1s linear infinite;}
.pace .pace-activity:before {  content: ' ';  position: absolute;  top: 10px;  left: 10px;  height: 50px;  width: 50px;  display: block;  border-width: 10px;  border-style: solid;  border-color: #29d transparent transparent;  border-radius: 50%;}
@-webkit-keyframes spin {  100% { -webkit-transform: rotate(359deg); }}
@-moz-keyframes spin {  100% { -moz-transform: rotate(359deg); }}
@-o-keyframes spin {  100% { -moz-transform: rotate(359deg); }}
@keyframes spin {  100% {  transform: rotate(359deg); }}

Center Simple

.pace {  -webkit-pointer-events: none;  pointer-events: none;
  -webkit-user-select: none;  -moz-user-select: none;  user-select: none;
  z-index: 2000;  position: fixed;  margin: auto;  top: 0;  left: 0;  right: 0;  bottom: 0;  height: 5px;  width: 200px;  background: #fff;  border: 1px solid #29d;
  overflow: hidden;}
.pace .pace-progress {  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  -ms-box-sizing: border-box;  -o-box-sizing: border-box;  box-sizing: border-box;
  -webkit-transform: translate3d(0, 0, 0);  -moz-transform: translate3d(0, 0, 0);  -ms-transform: translate3d(0, 0, 0);  -o-transform: translate3d(0, 0, 0);  transform: translate3d(0, 0, 0);
  max-width: 200px;  position: fixed;  z-index: 2000;  display: block;  position: absolute;  top: 0;  right: 100%;  height: 100%;  width: 100%;  background: #29d;}
.pace.pace-inactive {  display: none;}

js模拟浏览器加载效果 pace.js 中文官方文档的更多相关文章

  1. 一个js文件如何加载另外一个js文件

    方法一,在调用文件的顶部加入下例代码: document.write(”<script language=javascript src=’/js/import.js’></scrip ...

  2. 商品详情页,banner滚动点击加载效果,js,jquary

    <script language="javascript">       $(document).ready(function () {   //purchase   ...

  3. js 上下滚动加停顿效果,js 跑马灯加停顿效果

    <div id="middle"> <ul id="slide1"> <li>尾号1183的用户刚刚领取了 78.23元 的 ...

  4. 美团、点评、猫眼App下拉加载效果的源码分享

    今天我准备拿大众点评.美团.猫眼电影三款App的实例来分享一下APICloud下拉加载这个模块的效果. 美团App下拉加载效果   以美团中的下拉酷似动画的萌萌着小人儿效果作为参考,来实现的一个加载模 ...

  5. js图片未加载完显示loading效果

    <html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...

  6. wow.js让css3动画变动更有趣(滚动页面动画模拟懒加载特效)

    CSS3的出现给网站页面增加了活力,网站增色不少,有这么小小的一款插件就能做出很多动画效果. 最重要的是它:简单易用.轻量级.无需 jQuery......他就是wow.js 地址:https://d ...

  7. js图片加载效果(延迟加载+瀑布流加载)

    概述 两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果 详细 代码下载:http://www.demodash ...

  8. pace.js – 网页自动加载进度条插件

    网站顶部的页面加载进度条是怎么实现的,页面的加载进度百分比,有时候获取是比较麻烦的,当然也可以利用一些优秀的JavaScript插件来实现,今天就为大家介绍这样子的一款插件:pace.js. [官方网 ...

  9. [js开源组件开发]loading加载效果

    loading加载效果 由于程序和网络的原因,常常我们需要在交互的时候,给用户一个正在加载中的动画,于是,loading组件横空出世.不需要复杂的代码,也能完成大多数业务,这就是我做组件的原则. 效果 ...

随机推荐

  1. 《JavaScript 源码分析》之 jquery.unobtrusive-ajax.js

    /*! ** Unobtrusive Ajax support library for jQuery ** Copyright (C) Microsoft Corporation. All right ...

  2. 安卓模拟器的报错This AVD&#39;s configuration is missing a kernel file!!

    安卓模拟器的报错: 可能的原因是target设置问题:

  3. CAS 4.0.0RC 配置通过数据库认证用户登录

    配置通过数据库认证用户登录 打开webapp\WEB-INF目录下的deployerConfigContext.xml,替换 <bean id="primaryAuthenticati ...

  4. SQL Server练习

    SQL Server 基本语法: http://www.w3school.com.cn/sql/sql_intro.asp 练习1: 运行语句: USE [Test1] select FNumber, ...

  5. 配置android source 在ubuntu中编译环境

    在Ubuntu中可以配置 android source 编译环境,推荐使用最新的64位的Ubuntu  LTS(Long Time Support); 1.安装JDK. AOSP主分支代码需要java ...

  6. C++函数后面加const修饰

    声明一个成员函数的时候用const关键字是用来说明这个函数是 "只读(read-only)"函数,也就是说明这个函数不会修改任何数据成员(object). 为了声明一个const成 ...

  7. Home键的获取监听,安卓4.0后就不能在onkeydown方法中获取了。怎么办。

    Android下得到Home键按下的消息   在Android下,并不能通过onKeyDown这样的事件来截获Home键的消息,其原因在Android的文档中已经明确的说过了 public stati ...

  8. CodeForces 626D Jerry&#39;s Protest

    计算前两盘A赢,最后一盘B赢的情况下,B获得的球的值总和大于A获得的球总和值的概率. 存储每一对球的差值有几个,然后处理一下前缀和,暴力枚举就好了...... #include<cstdio&g ...

  9. python ——面向对象进阶

    1.staticmethod和classmethod staticmethod  静态方法: 让类里的方法,直接被类调用,就像正常的函数一样 宝宝,男 博博,女 海娇,男 海燕,女 海东,男 海峰,男 ...

  10. servlet3.0 新特性——异步处理

    Servlet 3.0 之前,一个普通 Servlet 的主要工作流程大致如下: 首先,Servlet 接收到请求之后,可能需要对请求携带的数据进行一些预处理: 接着,调用业务接口的某些方法,以完成业 ...