js模拟浏览器加载效果 pace.js 中文官方文档
2017-02-20 13:00
826 查看
2017年2月20日12:11:25
官网URL：http://github.hubspot.com/pace/docs/welcome/
文档 http://github.hubspot.com/pace/
本人测试，是兼容手机的，所以放心使用
Pace将自动监视您的ajax请求，事件循环滞后，文档就绪状态和页面上的元素以决定进度。 在ajax导航它会再次开始！
如果你使用AMD或Browserify，需要在pace.js和调用pace.start（）早在加载过程是可能的。
如果你想做一些调整，这里是如何：
您可以在引入文件之前设置window.paceOptions：
您还可以在脚本标记上放置选项：
如果您使用AMD或Browserify，您可以传递您的选项开始：
http://github.hubspot.com/pace/docs/welcome/ 里面有主题模板注意
Ajax
监控页面上所有的Ajax请求
Elements
对于页面上的特定元素的存在性检查
Document
检查Document元素状态
Event Lag
检查事件循环滞后信号，表明正在执行javascript
它们可以通过相同名称的配置选项配置或禁用。
将您自己的类添加到paceOptions.extraSources以添加更多源。 每个源应该有一个.progress属性，或者一个.elements属性，它是带有.progress属性的对象的列表。 Pace将自动处理所有缩放，使进度更改对用户看起来流畅。
当每个选择器匹配什么时，Pace会考虑元素测试成功。 对于此示例，如果存在.timeline或.timeline错误，并且存在.user-profile或.profile-error。
您还可以对每个持续时间超过x ms的ajax请求重新启动步速。 你想禁用这个，如果你使ajax请求用户不需要知道，像预缓存：
您可以随时通过调用Pace.restart（）手动触发重新启动，
有关所有选项的完整列表，请参阅源代码。
您可以使用on，off和once方法绑定到事件：
您可以通过使用ajax为false禁用所有的ajax跟踪：
您可以通过将restartOnRequestAfter设置为false来禁用ajax跟踪（页面导航除外）：
您可以通过在Pace.ignorecallback中触发对特定请求或请求手动禁用跟踪：
您可以通过在Pace.trackcallback内触发进度条来强制显示特定请求的进度条：
您也可以根据模式忽略网址：
构建需要node.js.
您也可以运行grunt watch，让它在您进行更改时自动构建。
没有必要在PRs中包括编译的文件。
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;}
官网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: 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;
}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 未加载该文档中的代码或者没有效果
- CSS及JS文档中文注释代码在浏览器中显示乱码
- Pace.js – 超赞的页面加载进度自动指示和 Ajax 导航效果
- Phaser.js 官方中文文档 phaser.io
- dbcp配置--官方文档中文版本
- 图片太多导致在网速慢的情况下效果太差需要用js预加载图片
- Div+css+js实现高度适应浏览器,做出的效果像winform
- js效果 图片加载进度实时显示
- js模拟滤镜的图片渐显效果
- dbcp配置--官方文档中文版本
- js模拟弹出效果代码修正版
- js模拟滤镜的图片渐显效果
- 用JS实现渐变效果，兼容各款浏览器
- JS多个矩形块选择效果代码(模拟CS结构)
- JS多个矩形块选择效果代码(模拟CS结构)
- js模拟画笔效果
- jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果ie,firefox
- XLoadTree 基于AJAX + XML动态加载的JS树组件的文档翻译
- 模拟MSN和QQ的上线提示效果 区别IE和FF浏览器
- JS模拟ALERT半透明背景,仿关机效果