Showing preview only (836K chars total). Download the full file or copy to clipboard to get everything.
Repository: CodeByZach/pace
Branch: master
Commit: b163bc0f4865
Files: 171
Total size: 785.6 KB
Directory structure:
gitextract_rpx0a4w0/
├── .gitignore
├── LICENSE
├── README.md
├── pace-theme-default.css
├── pace.js
├── package.json
├── templates/
│ ├── pace-theme-barber-shop.tmpl.css
│ ├── pace-theme-big-counter.tmpl.css
│ ├── pace-theme-bounce.tmpl.css
│ ├── pace-theme-center-atom.tmpl.css
│ ├── pace-theme-center-circle.tmpl.css
│ ├── pace-theme-center-radar.tmpl.css
│ ├── pace-theme-center-simple.tmpl.css
│ ├── pace-theme-corner-indicator.tmpl.css
│ ├── pace-theme-fill-left.tmpl.css
│ ├── pace-theme-flash.tmpl.css
│ ├── pace-theme-flat-top.tmpl.css
│ ├── pace-theme-loading-bar.tmpl.css
│ ├── pace-theme-mac-osx.tmpl.css
│ ├── pace-theme-material.tmpl.css
│ └── pace-theme-minimal.tmpl.css
└── themes/
├── black/
│ ├── pace-theme-barber-shop.css
│ ├── pace-theme-big-counter.css
│ ├── pace-theme-bounce.css
│ ├── pace-theme-center-atom.css
│ ├── pace-theme-center-circle.css
│ ├── pace-theme-center-radar.css
│ ├── pace-theme-center-simple.css
│ ├── pace-theme-corner-indicator.css
│ ├── pace-theme-fill-left.css
│ ├── pace-theme-flash.css
│ ├── pace-theme-flat-top.css
│ ├── pace-theme-loading-bar.css
│ ├── pace-theme-mac-osx.css
│ ├── pace-theme-material.css
│ └── pace-theme-minimal.css
├── blue/
│ ├── pace-theme-barber-shop.css
│ ├── pace-theme-big-counter.css
│ ├── pace-theme-bounce.css
│ ├── pace-theme-center-atom.css
│ ├── pace-theme-center-circle.css
│ ├── pace-theme-center-radar.css
│ ├── pace-theme-center-simple.css
│ ├── pace-theme-corner-indicator.css
│ ├── pace-theme-fill-left.css
│ ├── pace-theme-flash.css
│ ├── pace-theme-flat-top.css
│ ├── pace-theme-loading-bar.css
│ ├── pace-theme-mac-osx.css
│ ├── pace-theme-material.css
│ └── pace-theme-minimal.css
├── green/
│ ├── pace-theme-barber-shop.css
│ ├── pace-theme-big-counter.css
│ ├── pace-theme-bounce.css
│ ├── pace-theme-center-atom.css
│ ├── pace-theme-center-circle.css
│ ├── pace-theme-center-radar.css
│ ├── pace-theme-center-simple.css
│ ├── pace-theme-corner-indicator.css
│ ├── pace-theme-fill-left.css
│ ├── pace-theme-flash.css
│ ├── pace-theme-flat-top.css
│ ├── pace-theme-loading-bar.css
│ ├── pace-theme-mac-osx.css
│ ├── pace-theme-material.css
│ └── pace-theme-minimal.css
├── orange/
│ ├── pace-theme-barber-shop.css
│ ├── pace-theme-big-counter.css
│ ├── pace-theme-bounce.css
│ ├── pace-theme-center-atom.css
│ ├── pace-theme-center-circle.css
│ ├── pace-theme-center-radar.css
│ ├── pace-theme-center-simple.css
│ ├── pace-theme-corner-indicator.css
│ ├── pace-theme-fill-left.css
│ ├── pace-theme-flash.css
│ ├── pace-theme-flat-top.css
│ ├── pace-theme-loading-bar.css
│ ├── pace-theme-mac-osx.css
│ ├── pace-theme-material.css
│ └── pace-theme-minimal.css
├── pink/
│ ├── pace-theme-barber-shop.css
│ ├── pace-theme-big-counter.css
│ ├── pace-theme-bounce.css
│ ├── pace-theme-center-atom.css
│ ├── pace-theme-center-circle.css
│ ├── pace-theme-center-radar.css
│ ├── pace-theme-center-simple.css
│ ├── pace-theme-corner-indicator.css
│ ├── pace-theme-fill-left.css
│ ├── pace-theme-flash.css
│ ├── pace-theme-flat-top.css
│ ├── pace-theme-loading-bar.css
│ ├── pace-theme-mac-osx.css
│ ├── pace-theme-material.css
│ └── pace-theme-minimal.css
├── purple/
│ ├── pace-theme-barber-shop.css
│ ├── pace-theme-big-counter.css
│ ├── pace-theme-bounce.css
│ ├── pace-theme-center-atom.css
│ ├── pace-theme-center-circle.css
│ ├── pace-theme-center-radar.css
│ ├── pace-theme-center-simple.css
│ ├── pace-theme-corner-indicator.css
│ ├── pace-theme-fill-left.css
│ ├── pace-theme-flash.css
│ ├── pace-theme-flat-top.css
│ ├── pace-theme-loading-bar.css
│ ├── pace-theme-mac-osx.css
│ ├── pace-theme-material.css
│ └── pace-theme-minimal.css
├── red/
│ ├── pace-theme-barber-shop.css
│ ├── pace-theme-big-counter.css
│ ├── pace-theme-bounce.css
│ ├── pace-theme-center-atom.css
│ ├── pace-theme-center-circle.css
│ ├── pace-theme-center-radar.css
│ ├── pace-theme-center-simple.css
│ ├── pace-theme-corner-indicator.css
│ ├── pace-theme-fill-left.css
│ ├── pace-theme-flash.css
│ ├── pace-theme-flat-top.css
│ ├── pace-theme-loading-bar.css
│ ├── pace-theme-mac-osx.css
│ ├── pace-theme-material.css
│ └── pace-theme-minimal.css
├── silver/
│ ├── pace-theme-barber-shop.css
│ ├── pace-theme-big-counter.css
│ ├── pace-theme-bounce.css
│ ├── pace-theme-center-atom.css
│ ├── pace-theme-center-circle.css
│ ├── pace-theme-center-radar.css
│ ├── pace-theme-center-simple.css
│ ├── pace-theme-corner-indicator.css
│ ├── pace-theme-fill-left.css
│ ├── pace-theme-flash.css
│ ├── pace-theme-flat-top.css
│ ├── pace-theme-loading-bar.css
│ ├── pace-theme-mac-osx.css
│ ├── pace-theme-material.css
│ └── pace-theme-minimal.css
├── white/
│ ├── pace-theme-barber-shop.css
│ ├── pace-theme-big-counter.css
│ ├── pace-theme-bounce.css
│ ├── pace-theme-center-atom.css
│ ├── pace-theme-center-circle.css
│ ├── pace-theme-center-radar.css
│ ├── pace-theme-center-simple.css
│ ├── pace-theme-corner-indicator.css
│ ├── pace-theme-fill-left.css
│ ├── pace-theme-flash.css
│ ├── pace-theme-flat-top.css
│ ├── pace-theme-loading-bar.css
│ ├── pace-theme-mac-osx.css
│ ├── pace-theme-material.css
│ └── pace-theme-minimal.css
└── yellow/
├── pace-theme-barber-shop.css
├── pace-theme-big-counter.css
├── pace-theme-bounce.css
├── pace-theme-center-atom.css
├── pace-theme-center-circle.css
├── pace-theme-center-radar.css
├── pace-theme-center-simple.css
├── pace-theme-corner-indicator.css
├── pace-theme-fill-left.css
├── pace-theme-flash.css
├── pace-theme-flat-top.css
├── pace-theme-loading-bar.css
├── pace-theme-mac-osx.css
├── pace-theme-material.css
└── pace-theme-minimal.css
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
================================================
FILE: LICENSE
================================================
Copyright (c) 2013 HubSpot, Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
================================================
FILE: README.md
================================================
PACE
====
[](https://github.com/CodeByZach/pace/releases/latest) [](https://www.jsdelivr.com/package/npm/pace-js) [](https://github.com/CodeByZach/pace/stargazers) [](https://github.com/CodeByZach/pace/network/members) [](LICENSE)
An automatic web page progress bar.
### [Demo](https://codebyzach.github.io/pace/)
### [Documentation](https://codebyzach.github.io/pace/docs/)
Include [pace.js](https://cdn.jsdelivr.net/npm/pace-js@latest/pace.min.js) and the
[theme](https://codebyzach.github.io/pace/) css of your choice on your page
(as early as possible), and you're done!
Pace will automatically monitor your ajax requests, event loop lag, document
ready state, and elements on your page to decide the progress. On ajax navigation
it will begin again!
If you use AMD or Browserify, require pace.js and call `pace.start()` as early in the loading process as possible.
Example
-------
```html
<head>
<script src="https://cdn.jsdelivr.net/npm/pace-js@latest/pace.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pace-js@latest/pace-theme-default.min.css">
</head>
```
Configuration
-------------
Pace is fully automatic, no configuration is necessary to get started.
If you would like to make some tweaks, here's how:
You can set `window.paceOptions` before bringing in the file:
```javascript
paceOptions = {
// Disable the 'elements' source
elements: false,
// Only show the progress on regular and ajax-y page navigation,
// not every request
restartOnRequestAfter: false
}
```
You can also put options on the script tag:
```html
<script data-pace-options='{ "ajax": false }' src="https://cdn.jsdelivr.net/npm/pace-js@latest/pace.min.js"></script>
```
If you're using AMD or Browserify, you can pass your options to `start`:
```javascript
define(['pace'], function(pace){
pace.start({
document: false
});
});
```
Themes
------
Pace includes a bunch of [themes](https://codebyzach.github.io/pace/)
to get you started. Just include the appropriate css file. Send us a PR with
any interesting themes you create.
If you have minor styling changes and don't want to extend theme css, you can add custom class names to
the progress bar using the "className" option:
```javascript
paceOptions = {
className: 'my-custom-class'
}
```
Collectors
----------
Collectors are the bits of code which gather progress information. Pace includes four default collectors:
- Ajax
Monitors all ajax requests on the page
- Elements
Checks for the existence of specific elements on the page
- Document
Checks the document readyState
- Event Lag
Checks for event loop lag signaling that javascript is being executed
They can each be configured or disabled through configuration options of the same name.
```javascript
paceOptions = {
ajax: false, // disabled
document: false, // disabled
eventLag: false, // disabled
elements: {
selectors: ['.my-page']
}
};
```
Add your own classes to `paceOptions.extraSources` to add more sources. Each source should either
have a `.progress` property, or a `.elements` property which is a list of objects with
`.progress` properties. Pace will automatically handle all scaling to make the progress
changes look smooth to the user.
Elements
--------
Elements being rendered to the screen is one way for us to decide that the page has been
rendered. If you would like to use that source of information (not required at all),
specify one or more selectors. You can comma separate the selectors to properly handle
error states, where the progress bar should disappear, but the element we are looking for
may never appear:
```javascript
paceOptions = {
elements: {
selectors: ['.timeline, .timeline-error', '.user-profile, .profile-error']
}
}
```
Pace will consider the elements test successful when each selector matches something. For
this example, when either `.timeline` or `.timeline-error` exist, and either `.user-profile`
or `.profile-error` exist.
Restart Rules
-------------
Most users want the progress bar to automatically restart when a pushState event occurs
(generally means ajax navigation is occuring). You can disable this:
```javascript
paceOptions = {
restartOnPushState: false
}
```
You can also have pace restart on every ajax request which lasts longer than x ms. You'll want to
disable this if you make ajax requests the user doesn't need to know about, like precaching:
```javascript
paceOptions = {
restartOnRequestAfter: false
}
```
You can always trigger a restart manually by calling `Pace.restart()`
See [the source](https://github.com/CodeByZach/pace/blob/master/pace.js) for a full list of options.
API
---
Pace exposes the following methods:
- `Pace.start`: Show the progress bar and start updating. Called automatically if you don't use AMD or CommonJS.
- `Pace.restart`: Show the progress bar if it's hidden and start reporting the progress from scratch. Called automatically
whenever `pushState` or `replaceState` is called by default.
- `Pace.stop`: Hide the progress bar and stop updating it.
- `Pace.track`: Explicitly track one or more requests, see Tracking below
- `Pace.ignore`: Explicitly ignore one or more requests, see Tracking below
Events
------
Pace fires the following events:
- `start`: When pace is initially started, or as a part of a restart
- `stop`: When pace is manually stopped, or as a part of a restart
- `restart`: When pace is restarted (manually, or by a new AJAX request)
- `done`: When pace is finished
- `hide`: When the pace is hidden (can be later than `done`, based on `ghostTime` and `minTime`)
You can bind onto events using the `on`, `off` and `once` methods:
- `Pace.on(event, handler, [context])`: Call `handler` (optionally with context) when `event` is triggered
- `Pace.off(event, [handler])`: Unbind the provided `event` and `handler` combination.
- `Pace.once(event, handler, [context])`: Bind `handler` to the next (and only the next) incidence of `event`
Tracking
--------
By default, Pace will show any ajax requests which begin as a part of a normal or ajax-y page load, or which last longer than
500ms.
You can disable all ajax tracking by setting `ajax` to false:
```javascript
Pace.options = {
ajax: false
}
```
You can disable ajax tracking except on page navigation by setting `restartOnRequestAfter` to false:
```javascript
Pace.options = {
restartOnRequestAfter: false
}
```
You can manually disable tracking for a specific request or requests by triggering them within a `Pace.ignore` callback:
```javascript
Pace.ignore(function() {
$.ajax(...)
});
```
You can force the progress bar to be shown for a specific request by triggering them within a `Pace.track` callback:
```javascript
Pace.track(function() {
$.ajax(...)
});
```
You can also ignore URLs based on a pattern:
```javascript
Pace.options = {
ajax: {
ignoreURLs: ['some-substring', /some-regexp/]
}
}
```
Dependencies
------------
None!
Support
-------
Pace is designed to support IE8+ (standards mode), FF 3.5+, Chrome, Safari 4+, Opera 10.5+, and all modern
mobile browsers. If you run into a compatibility issue, or can make a case for supporting something else,
please create an issue.
Size
----
pace.js is 4kb minified and gzipped. The themes vary between 0.5 and 4kb.
Issues
------
We have obviously not tested this on every website. If you run into an issue, or find a way the automatic
detection could be better, please [create an Issue](https://github.com/CodeByZach/pace/issues/new). If you can include a test case, that's even better.
Credits
-------
[HubSpot](http://dev.hubspot.com)
[CodeByZach](https://github.com/CodeByZach)
Javascript by [Zack Bloom](http://twitter.com/zackbloom)
CSS by [Adam Schwartz](http://twitter.com/adamfschwartz)
Themes inspired by [Mary Lou](http://tympanus.net/codrops/2013/09/18/creative-loading-effects/)
Project inspired by [nprogress](http://ricostacruz.com/nprogress/)
================================================
FILE: pace-theme-default.css
================================================
/*!
* pace.js v1.2.4 | Default theme
* https://github.com/CodeByZach/pace/
* Licensed MIT © HubSpot, Inc.
*/
.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: #D72630;
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 2px;
}
================================================
FILE: pace.js
================================================
/*!
* pace.js v1.2.4
* https://github.com/CodeByZach/pace/
* Licensed MIT © HubSpot, Inc.
*/
(function() {
var AjaxMonitor, Bar, DocumentMonitor, ElementMonitor, ElementTracker, EventLagMonitor, Evented, Events, NoTargetError, Pace, RequestIntercept, SOURCE_KEYS, Scaler, SocketRequestTracker, XHRRequestTracker, addEventListener, animation, avgAmplitude, bar, cancelAnimation, cancelAnimationFrame, defaultOptions, extend, extendNative, getFromDOM, getIntercept, handlePushState, ignoreStack, init, now, options, requestAnimationFrame, result, runAnimation, scalers, shouldIgnoreURL, shouldTrack, source, sources, uniScaler, _WebSocket, _XDomainRequest, _XMLHttpRequest, _i, _intercept, _len, _pushState, _ref, _ref1, _replaceState,
__slice = [].slice,
__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
__indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; },
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
defaultOptions = {
className: '',
catchupTime: 100,
initialRate: .03,
minTime: 250,
ghostTime: 100,
maxProgressPerFrame: 20,
easeFactor: 1.25,
startOnPageLoad: true,
restartOnPushState: true,
restartOnRequestAfter: 500,
target: 'body',
elements: {
checkInterval: 100,
selectors: ['body']
},
eventLag: {
minSamples: 10,
sampleCount: 3,
lagThreshold: 3
},
ajax: {
trackMethods: ['GET'],
trackWebSockets: true,
ignoreURLs: []
}
};
now = function() {
var _ref;
return (_ref = typeof performance !== "undefined" && performance !== null ? typeof performance.now === "function" ? performance.now() : void 0 : void 0) != null ? _ref : +(new Date);
};
requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
addEventListener = function(obj, event, callback) {
if (typeof obj.addEventListener === "function") {
return obj.addEventListener(event, callback, false);
} else {
return function() {
if (typeof obj["on" + event] !== "function" || typeof obj["on" + event].eventListeners !== "object") {
var eventListeners = new Events();
if (typeof obj["on" + event] === "function") {
eventListeners.on(event, obj["on" + event]);
}
obj["on" + event] = function(evt) {
return eventListeners.trigger(event, evt);
};
obj["on" + event].eventListeners = eventListeners;
} else {
var eventListeners = obj["on" + event].eventListeners;
}
eventListeners.on(event, callback);
}();
}
};
if (requestAnimationFrame == null) {
requestAnimationFrame = function(fn) {
return setTimeout(fn, 50);
};
cancelAnimationFrame = function(id) {
return clearTimeout(id);
};
}
runAnimation = function(fn) {
var last, tick;
last = now();
tick = function() {
var diff;
diff = now() - last;
if (diff >= 33) {
last = now();
return fn(diff, function() {
return requestAnimationFrame(tick);
});
} else {
return setTimeout(tick, 33 - diff);
}
};
return tick();
};
result = function() {
var args, key, obj;
obj = arguments[0], key = arguments[1], args = 3 <= arguments.length ? __slice.call(arguments, 2) : [];
if (typeof obj[key] === 'function') {
return obj[key].apply(obj, args);
} else {
return obj[key];
}
};
extend = function() {
var key, out, source, sources, val, _i, _len;
out = arguments[0], sources = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
for (_i = 0, _len = sources.length; _i < _len; _i++) {
source = sources[_i];
if (source) {
for (key in source) {
if (!__hasProp.call(source, key)) continue;
val = source[key];
if ((out[key] != null) && typeof out[key] === 'object' && (val != null) && typeof val === 'object') {
extend(out[key], val);
} else {
out[key] = val;
}
}
}
}
return out;
};
avgAmplitude = function(arr) {
var count, sum, v, _i, _len;
sum = count = 0;
for (_i = 0, _len = arr.length; _i < _len; _i++) {
v = arr[_i];
sum += Math.abs(v);
count++;
}
return sum / count;
};
getFromDOM = function(key, json) {
var data, e, el;
if (key == null) {
key = 'options';
}
if (json == null) {
json = true;
}
el = document.querySelector("[data-pace-" + key + "]");
if (!el) {
return;
}
data = el.getAttribute("data-pace-" + key);
if (!json) {
return data;
}
try {
return JSON.parse(data);
} catch (_error) {
e = _error;
return typeof console !== "undefined" && console !== null ? console.error("Error parsing inline pace options", e) : void 0;
}
};
Evented = (function() {
function Evented() {}
Evented.prototype.on = function(event, handler, ctx, once) {
var _base;
if (once == null) {
once = false;
}
if (this.bindings == null) {
this.bindings = {};
}
if ((_base = this.bindings)[event] == null) {
_base[event] = [];
}
return this.bindings[event].push({
handler: handler,
ctx: ctx,
once: once
});
};
Evented.prototype.once = function(event, handler, ctx) {
return this.on(event, handler, ctx, true);
};
Evented.prototype.off = function(event, handler) {
var i, _ref, _results;
if (((_ref = this.bindings) != null ? _ref[event] : void 0) == null) {
return;
}
if (handler == null) {
return delete this.bindings[event];
} else {
i = 0;
_results = [];
while (i < this.bindings[event].length) {
if (this.bindings[event][i].handler === handler) {
_results.push(this.bindings[event].splice(i, 1));
} else {
_results.push(i++);
}
}
return _results;
}
};
Evented.prototype.trigger = function() {
var args, ctx, event, handler, i, once, _ref, _ref1, _results;
event = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
if ((_ref = this.bindings) != null ? _ref[event] : void 0) {
i = 0;
_results = [];
while (i < this.bindings[event].length) {
_ref1 = this.bindings[event][i], handler = _ref1.handler, ctx = _ref1.ctx, once = _ref1.once;
handler.apply(ctx != null ? ctx : this, args);
if (once) {
_results.push(this.bindings[event].splice(i, 1));
} else {
_results.push(i++);
}
}
return _results;
}
};
return Evented;
})();
Pace = window.Pace || {};
window.Pace = Pace;
extend(Pace, Evented.prototype);
options = Pace.options = extend({}, defaultOptions, window.paceOptions, getFromDOM());
_ref = ['ajax', 'document', 'eventLag', 'elements'];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
source = _ref[_i];
if (options[source] === true) {
options[source] = defaultOptions[source];
}
}
NoTargetError = (function(_super) {
__extends(NoTargetError, _super);
function NoTargetError() {
_ref1 = NoTargetError.__super__.constructor.apply(this, arguments);
return _ref1;
}
return NoTargetError;
})(Error);
Bar = (function() {
function Bar() {
this.progress = 0;
}
Bar.prototype.getElement = function() {
var targetElement;
if (this.el == null) {
targetElement = document.querySelector(options.target);
if (!targetElement) {
throw new NoTargetError;
}
this.el = document.createElement('div');
this.el.className = "pace pace-active";
document.body.className = document.body.className.replace(/(pace-done )|/, 'pace-running ');
var _custom_class_name = (options.className !== '') ? ' '+options.className : '';
this.el.innerHTML = '<div class="pace-progress'+_custom_class_name+'">\n <div class="pace-progress-inner"></div>\n</div>\n<div class="pace-activity"></div>';
if (targetElement.firstChild != null) {
targetElement.insertBefore(this.el, targetElement.firstChild);
} else {
targetElement.appendChild(this.el);
}
}
return this.el;
};
Bar.prototype.finish = function() {
var el;
el = this.getElement();
el.className = el.className.replace('pace-active', 'pace-inactive');
return document.body.className = document.body.className.replace('pace-running ', 'pace-done ');
};
Bar.prototype.update = function(prog) {
this.progress = prog;
Pace.trigger('progress', prog);
return this.render();
};
Bar.prototype.destroy = function() {
try {
this.getElement().parentNode.removeChild(this.getElement());
} catch (_error) {
NoTargetError = _error;
}
return this.el = void 0;
};
Bar.prototype.render = function() {
var el, key, progressStr, transform, _j, _len1, _ref2;
if (document.querySelector(options.target) == null) {
return false;
}
el = this.getElement();
transform = "translate3d(" + this.progress + "%, 0, 0)";
_ref2 = ['webkitTransform', 'msTransform', 'transform'];
for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) {
key = _ref2[_j];
el.children[0].style[key] = transform;
}
if (!this.lastRenderedProgress || this.lastRenderedProgress | 0 !== this.progress | 0) {
el.children[0].setAttribute('data-progress-text', "" + (this.progress | 0) + "%");
if (this.progress >= 100) {
progressStr = '99';
} else {
progressStr = this.progress < 10 ? "0" : "";
progressStr += this.progress | 0;
}
el.children[0].setAttribute('data-progress', "" + progressStr);
}
Pace.trigger('change', this.progress);
return this.lastRenderedProgress = this.progress;
};
Bar.prototype.done = function() {
return this.progress >= 100;
};
return Bar;
})();
Events = (function() {
function Events() {
this.bindings = {};
}
Events.prototype.trigger = function(name, val) {
var binding, _j, _len1, _ref2, _results;
if (this.bindings[name] != null) {
_ref2 = this.bindings[name];
_results = [];
for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) {
binding = _ref2[_j];
_results.push(binding.call(this, val));
}
return _results;
}
};
Events.prototype.on = function(name, fn) {
var _base;
if ((_base = this.bindings)[name] == null) {
_base[name] = [];
}
return this.bindings[name].push(fn);
};
return Events;
})();
_XMLHttpRequest = window.XMLHttpRequest;
_XDomainRequest = window.XDomainRequest;
_WebSocket = window.WebSocket;
extendNative = function(to, from) {
var e, key, _results;
_results = [];
for (key in from.prototype) {
try {
if ((to[key] == null) && typeof from[key] !== 'function') {
if (typeof Object.defineProperty === 'function') {
_results.push(Object.defineProperty(to, key, {
get: (function(key) {
return function() {
return from.prototype[key];
};
})(key),
configurable: true,
enumerable: true
}));
} else {
_results.push(to[key] = from.prototype[key]);
}
} else {
_results.push(void 0);
}
} catch (_error) {
e = _error;
}
}
return _results;
};
ignoreStack = [];
Pace.ignore = function() {
var args, fn, ret;
fn = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
ignoreStack.unshift('ignore');
ret = fn.apply(null, args);
ignoreStack.shift();
return ret;
};
Pace.track = function() {
var args, fn, ret;
fn = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
ignoreStack.unshift('track');
ret = fn.apply(null, args);
ignoreStack.shift();
return ret;
};
shouldTrack = function(method) {
var _ref2;
if (method == null) {
method = 'GET';
}
if (ignoreStack[0] === 'track') {
return 'force';
}
if (!ignoreStack.length && options.ajax) {
if (method === 'socket' && options.ajax.trackWebSockets) {
return true;
} else if (_ref2 = method.toUpperCase(), __indexOf.call(options.ajax.trackMethods, _ref2) >= 0) {
return true;
}
}
return false;
};
RequestIntercept = (function(_super) {
__extends(RequestIntercept, _super);
function RequestIntercept() {
var monitorXHR,
_this = this;
RequestIntercept.__super__.constructor.apply(this, arguments);
monitorXHR = function(req) {
var _open;
_open = req.open;
return req.open = function(type, url, async) {
if (shouldTrack(type)) {
_this.trigger('request', {
type: type,
url: url,
request: req
});
}
return _open.apply(req, arguments);
};
};
window.XMLHttpRequest = function(flags) {
var req;
req = new _XMLHttpRequest(flags);
monitorXHR(req);
return req;
};
try {
extendNative(window.XMLHttpRequest, _XMLHttpRequest);
} catch (_error) {}
if (_XDomainRequest != null) {
window.XDomainRequest = function() {
var req;
req = new _XDomainRequest;
monitorXHR(req);
return req;
};
try {
extendNative(window.XDomainRequest, _XDomainRequest);
} catch (_error) {}
}
if ((_WebSocket != null) && options.ajax.trackWebSockets) {
window.WebSocket = function(url, protocols) {
var req;
if (protocols != null) {
req = new _WebSocket(url, protocols);
} else {
req = new _WebSocket(url);
}
if (shouldTrack('socket')) {
_this.trigger('request', {
type: 'socket',
url: url,
protocols: protocols,
request: req
});
}
return req;
};
try {
extendNative(window.WebSocket, _WebSocket);
} catch (_error) {}
}
}
return RequestIntercept;
})(Events);
_intercept = null;
getIntercept = function() {
if (_intercept == null) {
_intercept = new RequestIntercept;
}
return _intercept;
};
shouldIgnoreURL = function(url) {
var pattern, _j, _len1, _ref2;
_ref2 = options.ajax.ignoreURLs;
for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) {
pattern = _ref2[_j];
if (typeof pattern === 'string') {
if (url.indexOf(pattern) !== -1) {
return true;
}
} else {
if (pattern.test(url)) {
return true;
}
}
}
return false;
};
getIntercept().on('request', function(_arg) {
var after, args, request, type, url;
type = _arg.type, request = _arg.request, url = _arg.url;
if (shouldIgnoreURL(url)) {
return;
}
if (!Pace.running && (options.restartOnRequestAfter !== false || shouldTrack(type) === 'force')) {
args = arguments;
after = options.restartOnRequestAfter || 0;
if (typeof after === 'boolean') {
after = 0;
}
return setTimeout(function() {
var stillActive, _j, _len1, _ref2, _ref3, _results;
if (type === 'socket') {
stillActive = request.readyState < 1;
} else {
stillActive = (0 < (_ref2 = request.readyState) && _ref2 < 4);
}
if (stillActive) {
Pace.restart();
_ref3 = Pace.sources;
_results = [];
for (_j = 0, _len1 = _ref3.length; _j < _len1; _j++) {
source = _ref3[_j];
if (source instanceof AjaxMonitor) {
source.watch.apply(source, args);
break;
} else {
_results.push(void 0);
}
}
return _results;
}
}, after);
}
});
AjaxMonitor = (function() {
function AjaxMonitor() {
this.complete = __bind(this.complete, this);
var _this = this;
this.elements = [];
getIntercept().on('request', function() {
return _this.watch.apply(_this, arguments);
});
}
AjaxMonitor.prototype.watch = function(_arg) {
var request, tracker, type, url;
type = _arg.type, request = _arg.request, url = _arg.url;
if (shouldIgnoreURL(url)) {
return;
}
if (type === 'socket') {
tracker = new SocketRequestTracker(request, this.complete);
} else {
tracker = new XHRRequestTracker(request, this.complete);
}
return this.elements.push(tracker);
};
AjaxMonitor.prototype.complete = function(tracker) {
return this.elements = this.elements.filter(function(e) {
return e !== tracker;
});
};
return AjaxMonitor;
})();
XHRRequestTracker = (function() {
function XHRRequestTracker(request, completeCallback) {
var event, size, _j, _len1, _onreadystatechange, _ref2,
_this = this;
this.progress = 0;
if (window.ProgressEvent != null) {
size = null;
addEventListener(request, 'progress', function(evt) {
if (evt.lengthComputable) {
return _this.progress = 100 * evt.loaded / evt.total;
} else {
return _this.progress = _this.progress + (100 - _this.progress) / 2;
}
}, false);
_ref2 = ['load', 'abort', 'timeout', 'error'];
for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) {
event = _ref2[_j];
addEventListener(request, event, function() {
completeCallback(_this);
return _this.progress = 100;
}, false);
}
} else {
_onreadystatechange = request.onreadystatechange;
request.onreadystatechange = function() {
var _ref3;
if ((_ref3 = request.readyState) === 0 || _ref3 === 4) {
completeCallback(_this);
_this.progress = 100;
} else if (request.readyState === 3) {
_this.progress = 50;
}
return typeof _onreadystatechange === "function" ? _onreadystatechange.apply(null, arguments) : void 0;
};
}
}
return XHRRequestTracker;
})();
SocketRequestTracker = (function() {
function SocketRequestTracker(request, completeCallback) {
var event, _j, _len1, _ref2,
_this = this;
this.progress = 0;
_ref2 = ['error', 'open'];
for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) {
event = _ref2[_j];
addEventListener(request, event, function() {
completeCallback(_this);
return _this.progress = 100;
}, false);
}
}
return SocketRequestTracker;
})();
ElementMonitor = (function() {
function ElementMonitor(options) {
var selector, _j, _len1, _ref2;
if (options == null) {
options = {};
}
this.complete = __bind(this.complete, this);
this.elements = [];
if (options.selectors == null) {
options.selectors = [];
}
_ref2 = options.selectors;
for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) {
selector = _ref2[_j];
this.elements.push(new ElementTracker(selector, this.complete));
}
}
ElementMonitor.prototype.complete = function(tracker) {
return this.elements = this.elements.filter(function(e) {
return e !== tracker;
});
};
return ElementMonitor;
})();
ElementTracker = (function() {
function ElementTracker(selector, completeCallback) {
this.selector = selector;
this.completeCallback = completeCallback;
this.progress = 0;
this.check();
}
ElementTracker.prototype.check = function() {
var _this = this;
if (document.querySelector(this.selector)) {
return this.done();
} else {
return setTimeout((function() {
return _this.check();
}), options.elements.checkInterval);
}
};
ElementTracker.prototype.done = function() {
this.completeCallback(this);
this.completeCallback = null;
return this.progress = 100;
};
return ElementTracker;
})();
DocumentMonitor = (function() {
DocumentMonitor.prototype.states = {
loading: 0,
interactive: 50,
complete: 100
};
function DocumentMonitor() {
var _onreadystatechange, _ref2,
_this = this;
this.progress = (_ref2 = this.states[document.readyState]) != null ? _ref2 : 100;
_onreadystatechange = document.onreadystatechange;
document.onreadystatechange = function() {
if (_this.states[document.readyState] != null) {
_this.progress = _this.states[document.readyState];
}
return typeof _onreadystatechange === "function" ? _onreadystatechange.apply(null, arguments) : void 0;
};
}
return DocumentMonitor;
})();
EventLagMonitor = (function() {
function EventLagMonitor() {
var avg, interval, last, points, samples,
_this = this;
this.progress = 0;
avg = 0;
samples = [];
points = 0;
last = now();
interval = setInterval(function() {
var diff;
diff = now() - last - 50;
last = now();
samples.push(diff);
if (samples.length > options.eventLag.sampleCount) {
samples.shift();
}
avg = avgAmplitude(samples);
if (++points >= options.eventLag.minSamples && avg < options.eventLag.lagThreshold) {
_this.progress = 100;
return clearInterval(interval);
} else {
return _this.progress = 100 * (3 / (avg + 3));
}
}, 50);
}
return EventLagMonitor;
})();
Scaler = (function() {
function Scaler(source) {
this.source = source;
this.last = this.sinceLastUpdate = 0;
this.rate = options.initialRate;
this.catchup = 0;
this.progress = this.lastProgress = 0;
if (this.source != null) {
this.progress = result(this.source, 'progress');
}
}
Scaler.prototype.tick = function(frameTime, val) {
var scaling;
if (val == null) {
val = result(this.source, 'progress');
}
if (val >= 100) {
this.done = true;
}
if (val === this.last) {
this.sinceLastUpdate += frameTime;
} else {
if (this.sinceLastUpdate) {
this.rate = (val - this.last) / this.sinceLastUpdate;
}
this.catchup = (val - this.progress) / options.catchupTime;
this.sinceLastUpdate = 0;
this.last = val;
}
if (val > this.progress) {
this.progress += this.catchup * frameTime;
}
scaling = 1 - Math.pow(this.progress / 100, options.easeFactor);
this.progress += scaling * this.rate * frameTime;
this.progress = Math.min(this.lastProgress + options.maxProgressPerFrame, this.progress);
this.progress = Math.max(0, this.progress);
this.progress = Math.min(100, this.progress);
this.lastProgress = this.progress;
return this.progress;
};
return Scaler;
})();
sources = null;
scalers = null;
bar = null;
uniScaler = null;
animation = null;
cancelAnimation = null;
Pace.running = false;
handlePushState = function() {
if (options.restartOnPushState) {
return Pace.restart();
}
};
if (window.history.pushState != null) {
_pushState = window.history.pushState;
window.history.pushState = function() {
handlePushState();
return _pushState.apply(window.history, arguments);
};
}
if (window.history.replaceState != null) {
_replaceState = window.history.replaceState;
window.history.replaceState = function() {
handlePushState();
return _replaceState.apply(window.history, arguments);
};
}
SOURCE_KEYS = {
ajax: AjaxMonitor,
elements: ElementMonitor,
document: DocumentMonitor,
eventLag: EventLagMonitor
};
(init = function() {
var type, _j, _k, _len1, _len2, _ref2, _ref3, _ref4;
Pace.sources = sources = [];
_ref2 = ['ajax', 'elements', 'document', 'eventLag'];
for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) {
type = _ref2[_j];
if (options[type] !== false) {
sources.push(new SOURCE_KEYS[type](options[type]));
}
}
_ref4 = (_ref3 = options.extraSources) != null ? _ref3 : [];
for (_k = 0, _len2 = _ref4.length; _k < _len2; _k++) {
source = _ref4[_k];
sources.push(new source(options));
}
Pace.bar = bar = new Bar;
scalers = [];
return uniScaler = new Scaler;
})();
Pace.stop = function() {
Pace.trigger('stop');
Pace.running = false;
bar.destroy();
cancelAnimation = true;
if (animation != null) {
if (typeof cancelAnimationFrame === "function") {
cancelAnimationFrame(animation);
}
animation = null;
}
return init();
};
Pace.restart = function() {
Pace.trigger('restart');
Pace.stop();
return Pace.start();
};
Pace.go = function() {
var start;
Pace.running = true;
bar.render();
start = now();
cancelAnimation = false;
return animation = runAnimation(function(frameTime, enqueueNextFrame) {
var avg, count, done, element, elements, i, j, remaining, scaler, scalerList, sum, _j, _k, _len1, _len2, _ref2;
remaining = 100 - bar.progress;
count = sum = 0;
done = true;
for (i = _j = 0, _len1 = sources.length; _j < _len1; i = ++_j) {
source = sources[i];
scalerList = scalers[i] != null ? scalers[i] : scalers[i] = [];
elements = (_ref2 = source.elements) != null ? _ref2 : [source];
for (j = _k = 0, _len2 = elements.length; _k < _len2; j = ++_k) {
element = elements[j];
scaler = scalerList[j] != null ? scalerList[j] : scalerList[j] = new Scaler(element);
done &= scaler.done;
if (scaler.done) {
continue;
}
count++;
sum += scaler.tick(frameTime);
}
}
avg = sum / count;
bar.update(uniScaler.tick(frameTime, avg));
if (bar.done() || done || cancelAnimation) {
bar.update(100);
Pace.trigger('done');
return setTimeout(function() {
bar.finish();
Pace.running = false;
return Pace.trigger('hide');
}, Math.max(options.ghostTime, Math.max(options.minTime - (now() - start), 0)));
} else {
return enqueueNextFrame();
}
});
};
Pace.start = function(_options) {
extend(options, _options);
Pace.running = true;
try {
bar.render();
} catch (_error) {
NoTargetError = _error;
}
if (!document.querySelector('.pace')) {
return setTimeout(Pace.start, 50);
} else {
Pace.trigger('start');
return Pace.go();
}
};
if (typeof define === 'function' && define.amd) {
define(function() {
return Pace;
});
} else if (typeof exports === 'object') {
module.exports = Pace;
} else {
if (options.startOnPageLoad) {
Pace.start();
}
}
}).call(this);
================================================
FILE: package.json
================================================
{
"name": "pace-js",
"version": "1.2.4",
"description": "Automatically add a progress bar to your site.",
"main": "pace.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/CodeByZach/pace.git"
},
"keywords": [
"pace",
"pace-js",
"pace.js",
"progress-bar",
"loading-bar",
"loading-indicator",
"loading-animation"
],
"author": "CodeByZach <codebyzach@gmail.com>",
"license": "MIT",
"bugs": {
"url": "https://github.com/CodeByZach/pace/issues"
},
"homepage": "https://github.com/CodeByZach/pace#readme"
}
================================================
FILE: templates/pace-theme-barber-shop.tmpl.css
================================================
.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: `args.color || "#29d"`;
position: fixed;
top: 0;
bottom: 0;
right: 100%;
width: 100%;
overflow: hidden;
height: 12px;
}
.pace .pace-activity {
position: fixed;
top: 0;
right: -32px;
bottom: 0;
left: 0;
height: 12px;
-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); }
}
================================================
FILE: templates/pace-theme-big-counter.tmpl.css
================================================
.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: `Color(args.color || '#000').clearer(0.8).rgbString()`;
}
================================================
FILE: templates/pace-theme-bounce.tmpl.css
================================================
.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: `args.color || "#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;
}
}
================================================
FILE: templates/pace-theme-center-atom.tmpl.css
================================================
.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: `args.color || "#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 `args.color || "#29d"`;
content: ' ';
display: block;
position: absolute;
top: 0;
left: 0;
height: 60px;
width: 100px;
}
.pace .pace-activity:after {
border-radius: 50%;
border: 5px solid `args.color || "#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 `args.color || "#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) }
}
================================================
FILE: templates/pace-theme-center-circle.tmpl.css
================================================
.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: `Color(args.color || '#29d').clearer(0.2).rgbString()`;
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) }
}
================================================
FILE: templates/pace-theme-center-radar.tmpl.css
================================================
.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: `args.color || "#29d"` transparent transparent;
border-radius: 50%;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-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: `args.color || "#29d"` transparent transparent;
border-radius: 50%;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
@-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); }
}
================================================
FILE: templates/pace-theme-center-simple.tmpl.css
================================================
.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 `args.color || "#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: `args.color || "#29d"`;
}
.pace.pace-inactive {
display: none;
}
================================================
FILE: templates/pace-theme-corner-indicator.tmpl.css
================================================
.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: `args.color || "#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); }
}
================================================
FILE: templates/pace-theme-fill-left.tmpl.css
================================================
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.pace-inactive {
display: none;
}
.pace .pace-progress {
background-color: `Color(args.color).clearer(0.8).rgbString() || "rgba(0, 0, 0, 0.2)"`;
position: fixed;
z-index: -1;
top: 0;
right: 100%;
bottom: 0;
width: 100%;
}
================================================
FILE: templates/pace-theme-flash.tmpl.css
================================================
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.pace-inactive {
display: none;
}
.pace .pace-progress {
background: `args.color || "#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 `args.color || '#29d'`, 0 0 5px `args.color || '#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: `args.color || '#29d'`;
border-left-color: `args.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); }
}
================================================
FILE: templates/pace-theme-flat-top.tmpl.css
================================================
.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: transform .5s ease-out;
-ms-transition: 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: `args.color || "#29d"`;
pointer-events: none;
}
================================================
FILE: templates/pace-theme-loading-bar.tmpl.css
================================================
.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: `args.color || "#29d"`;
color: `args.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;
}
`
var out = '';
for (var i = 0; i < 101 ; i++) {
out += ".pace .pace-progress[data-progress-text=\"" + i + "%\"]:after { right: -" + (200 - (i * 2) + ((i * 14) / 100)) + "px }\n";
}
out
`
.pace .pace-activity {
position: absolute;
width: 100%;
height: 28px;
z-index: 2001;
box-shadow: inset 0 0 0 2px `args.color || "#29d"`, inset 0 0 0 7px #FFF;
border-radius: 10px;
}
.pace.pace-inactive {
display: none;
}
================================================
FILE: templates/pace-theme-mac-osx.tmpl.css
================================================
.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: `Color(args.color || "#29d").darken(.2).saturate(.65).hexString();`;
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 `Color(args.color || "#29d").darken(.5).saturate(.7).hexString();`, inset 0 -1px `Color(args.color || "#29d").darken(.5).saturate(.7).hexString();`, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3);
-moz-box-shadow: inset -1px 0 `Color(args.color || "#29d").darken(.5).saturate(.7).hexString();`, inset 0 -1px `Color(args.color || "#29d").darken(.5).saturate(.7).hexString();`, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3);
-o-box-shadow: inset -1px 0 `Color(args.color || "#29d").darken(.5).saturate(.7).hexString();`, inset 0 -1px `Color(args.color || "#29d").darken(.5).saturate(.7).hexString();`, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3);
box-shadow: inset -1px 0 `Color(args.color || "#29d").darken(.5).saturate(.7).hexString();`, inset 0 -1px `Color(args.color || "#29d").darken(.5).saturate(.7).hexString();`, 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); }
}
================================================
FILE: templates/pace-theme-material.tmpl.css
================================================
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: `args.color || "#2196F3"`;
}
.pace-progress {
position: fixed;
z-index: 2000;
top: 50%;
left: 50%;
margin-left: -2.5rem;
margin-top: -2.5rem;
height: 5rem;
width: 5rem;
opacity: 1;
-webkit-transition: opacity 0.1s;
transition: opacity 0.1s;
-webkit-transform: translate3d(0, 0, 0) !important;
-ms-transform: translate3d(0, 0, 0) !important;
transform: translate3d(0, 0, 0) !important;
}
.pace-inactive .pace-progress,
.pace-progress[data-progress="00"] {
opacity: 0;
}
.pace-progress:after {
height: 5rem;
width: 5rem;
text-align: center;
line-height: 5rem;
content: attr(data-progress);
display: block;
font-size: 1.8rem;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 300;
}
.pace-progress .pace-progress-inner {
overflow: hidden;
position: absolute;
width: 2.5rem;
height: 5rem;
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-transition: -webkit-transform 0.1s;
transition: transform 0.1s;
left: 2.5rem;
top: 0;
}
.pace-progress .pace-progress-inner:before,
.pace-progress .pace-progress-inner:after {
position: absolute;
width: 5rem;
height: 5rem;
content: ' ';
left: -2.5rem;
top: 0;
box-sizing: border-box;
border: 1px solid;
border-radius: 5rem;
}
.pace-progress .pace-progress-inner:before {
border-right-color: transparent;
border-bottom-color: transparent;
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
}
.pace-progress .pace-progress-inner:after {
border-left-color: transparent;
border-top-color: transparent;
display: none;
-webkit-transform: rotate(315deg);
-ms-transform: rotate(315deg);
transform: rotate(315deg);
}
.pace-progress[data-progress="00"] .pace-progress-inner:before { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
.pace-progress[data-progress="01"] .pace-progress-inner:before { -webkit-transform: rotate(-41deg); -ms-transform: rotate(-41deg); transform: rotate(-41deg); }
.pace-progress[data-progress="02"] .pace-progress-inner:before { -webkit-transform: rotate(-38deg); -ms-transform: rotate(-38deg); transform: rotate(-38deg); }
.pace-progress[data-progress="03"] .pace-progress-inner:before { -webkit-transform: rotate(-34deg); -ms-transform: rotate(-34deg); transform: rotate(-34deg); }
.pace-progress[data-progress="04"] .pace-progress-inner:before { -webkit-transform: rotate(-31deg); -ms-transform: rotate(-31deg); transform: rotate(-31deg); }
.pace-progress[data-progress="05"] .pace-progress-inner:before { -webkit-transform: rotate(-27deg); -ms-transform: rotate(-27deg); transform: rotate(-27deg); }
.pace-progress[data-progress="06"] .pace-progress-inner:before { -webkit-transform: rotate(-23deg); -ms-transform: rotate(-23deg); transform: rotate(-23deg); }
.pace-progress[data-progress="07"] .pace-progress-inner:before { -webkit-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg); }
.pace-progress[data-progress="08"] .pace-progress-inner:before { -webkit-transform: rotate(-16deg); -ms-transform: rotate(-16deg); transform: rotate(-16deg); }
.pace-progress[data-progress="09"] .pace-progress-inner:before { -webkit-transform: rotate(-13deg); -ms-transform: rotate(-13deg); transform: rotate(-13deg); }
.pace-progress[data-progress="10"] .pace-progress-inner:before { -webkit-transform: rotate(-9deg); -ms-transform: rotate(-9deg); transform: rotate(-9deg); }
.pace-progress[data-progress="11"] .pace-progress-inner:before { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); }
.pace-progress[data-progress="12"] .pace-progress-inner:before { -webkit-transform: rotate(-2deg); -ms-transform: rotate(-2deg); transform: rotate(-2deg); }
.pace-progress[data-progress="13"] .pace-progress-inner:before { -webkit-transform: rotate(2deg); -ms-transform: rotate(2deg); transform: rotate(2deg); }
.pace-progress[data-progress="14"] .pace-progress-inner:before { -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); }
.pace-progress[data-progress="15"] .pace-progress-inner:before { -webkit-transform: rotate(9deg); -ms-transform: rotate(9deg); transform: rotate(9deg); }
.pace-progress[data-progress="16"] .pace-progress-inner:before { -webkit-transform: rotate(13deg); -ms-transform: rotate(13deg); transform: rotate(13deg); }
.pace-progress[data-progress="17"] .pace-progress-inner:before { -webkit-transform: rotate(16deg); -ms-transform: rotate(16deg); transform: rotate(16deg); }
.pace-progress[data-progress="18"] .pace-progress-inner:before { -webkit-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg); }
.pace-progress[data-progress="19"] .pace-progress-inner:before { -webkit-transform: rotate(23deg); -ms-transform: rotate(23deg); transform: rotate(23deg); }
.pace-progress[data-progress="20"] .pace-progress-inner:before { -webkit-transform: rotate(27deg); -ms-transform: rotate(27deg); transform: rotate(27deg); }
.pace-progress[data-progress="21"] .pace-progress-inner:before { -webkit-transform: rotate(31deg); -ms-transform: rotate(31deg); transform: rotate(31deg); }
.pace-progress[data-progress="22"] .pace-progress-inner:before { -webkit-transform: rotate(34deg); -ms-transform: rotate(34deg); transform: rotate(34deg); }
.pace-progress[data-progress="23"] .pace-progress-inner:before { -webkit-transform: rotate(38deg); -ms-transform: rotate(38deg); transform: rotate(38deg); }
.pace-progress[data-progress="24"] .pace-progress-inner:before { -webkit-transform: rotate(41deg); -ms-transform: rotate(41deg); transform: rotate(41deg); }
.pace-progress[data-progress="25"] .pace-progress-inner:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.pace-progress[data-progress="26"] .pace-progress-inner:before { -webkit-transform: rotate(49deg); -ms-transform: rotate(49deg); transform: rotate(49deg); }
.pace-progress[data-progress="27"] .pace-progress-inner:before { -webkit-transform: rotate(52deg); -ms-transform: rotate(52deg); transform: rotate(52deg); }
.pace-progress[data-progress="28"] .pace-progress-inner:before { -webkit-transform: rotate(56deg); -ms-transform: rotate(56deg); transform: rotate(56deg); }
.pace-progress[data-progress="29"] .pace-progress-inner:before { -webkit-transform: rotate(59deg); -ms-transform: rotate(59deg); transform: rotate(59deg); }
.pace-progress[data-progress="30"] .pace-progress-inner:before { -webkit-transform: rotate(63deg); -ms-transform: rotate(63deg); transform: rotate(63deg); }
.pace-progress[data-progress="31"] .pace-progress-inner:before { -webkit-transform: rotate(67deg); -ms-transform: rotate(67deg); transform: rotate(67deg); }
.pace-progress[data-progress="32"] .pace-progress-inner:before { -webkit-transform: rotate(70deg); -ms-transform: rotate(70deg); transform: rotate(70deg); }
.pace-progress[data-progress="33"] .pace-progress-inner:before { -webkit-transform: rotate(74deg); -ms-transform: rotate(74deg); transform: rotate(74deg); }
.pace-progress[data-progress="34"] .pace-progress-inner:before { -webkit-transform: rotate(77deg); -ms-transform: rotate(77deg); transform: rotate(77deg); }
.pace-progress[data-progress="35"] .pace-progress-inner:before { -webkit-transform: rotate(81deg); -ms-transform: rotate(81deg); transform: rotate(81deg); }
.pace-progress[data-progress="36"] .pace-progress-inner:before { -webkit-transform: rotate(85deg); -ms-transform: rotate(85deg); transform: rotate(85deg); }
.pace-progress[data-progress="37"] .pace-progress-inner:before { -webkit-transform: rotate(88deg); -ms-transform: rotate(88deg); transform: rotate(88deg); }
.pace-progress[data-progress="38"] .pace-progress-inner:before { -webkit-transform: rotate(92deg); -ms-transform: rotate(92deg); transform: rotate(92deg); }
.pace-progress[data-progress="39"] .pace-progress-inner:before { -webkit-transform: rotate(95deg); -ms-transform: rotate(95deg); transform: rotate(95deg); }
.pace-progress[data-progress="40"] .pace-progress-inner:before { -webkit-transform: rotate(99deg); -ms-transform: rotate(99deg); transform: rotate(99deg); }
.pace-progress[data-progress="41"] .pace-progress-inner:before { -webkit-transform: rotate(103deg); -ms-transform: rotate(103deg); transform: rotate(103deg); }
.pace-progress[data-progress="42"] .pace-progress-inner:before { -webkit-transform: rotate(106deg); -ms-transform: rotate(106deg); transform: rotate(106deg); }
.pace-progress[data-progress="43"] .pace-progress-inner:before { -webkit-transform: rotate(110deg); -ms-transform: rotate(110deg); transform: rotate(110deg); }
.pace-progress[data-progress="44"] .pace-progress-inner:before { -webkit-transform: rotate(113deg); -ms-transform: rotate(113deg); transform: rotate(113deg); }
.pace-progress[data-progress="45"] .pace-progress-inner:before { -webkit-transform: rotate(117deg); -ms-transform: rotate(117deg); transform: rotate(117deg); }
.pace-progress[data-progress="46"] .pace-progress-inner:before { -webkit-transform: rotate(121deg); -ms-transform: rotate(121deg); transform: rotate(121deg); }
.pace-progress[data-progress="47"] .pace-progress-inner:before { -webkit-transform: rotate(124deg); -ms-transform: rotate(124deg); transform: rotate(124deg); }
.pace-progress[data-progress="48"] .pace-progress-inner:before { -webkit-transform: rotate(128deg); -ms-transform: rotate(128deg); transform: rotate(128deg); }
.pace-progress[data-progress="49"] .pace-progress-inner:before { -webkit-transform: rotate(131deg); -ms-transform: rotate(131deg); transform: rotate(131deg); }
.pace-progress[data-progress="50"] .pace-progress-inner:before { -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); }
.pace-progress[data-progress="50"] .pace-progress-inner:after { -webkit-transform: rotate(315deg); -ms-transform: rotate(315deg); transform: rotate(315deg); display: block; }
.pace-progress[data-progress="51"] .pace-progress-inner:after { -webkit-transform: rotate(319deg); -ms-transform: rotate(319deg); transform: rotate(319deg); display: block; }
.pace-progress[data-progress="52"] .pace-progress-inner:after { -webkit-transform: rotate(322deg); -ms-transform: rotate(322deg); transform: rotate(322deg); display: block; }
.pace-progress[data-progress="53"] .pace-progress-inner:after { -webkit-transform: rotate(326deg); -ms-transform: rotate(326deg); transform: rotate(326deg); display: block; }
.pace-progress[data-progress="54"] .pace-progress-inner:after { -webkit-transform: rotate(329deg); -ms-transform: rotate(329deg); transform: rotate(329deg); display: block; }
.pace-progress[data-progress="55"] .pace-progress-inner:after { -webkit-transform: rotate(333deg); -ms-transform: rotate(333deg); transform: rotate(333deg); display: block; }
.pace-progress[data-progress="56"] .pace-progress-inner:after { -webkit-transform: rotate(337deg); -ms-transform: rotate(337deg); transform: rotate(337deg); display: block; }
.pace-progress[data-progress="57"] .pace-progress-inner:after { -webkit-transform: rotate(340deg); -ms-transform: rotate(340deg); transform: rotate(340deg); display: block; }
.pace-progress[data-progress="58"] .pace-progress-inner:after { -webkit-transform: rotate(344deg); -ms-transform: rotate(344deg); transform: rotate(344deg); display: block; }
.pace-progress[data-progress="59"] .pace-progress-inner:after { -webkit-transform: rotate(347deg); -ms-transform: rotate(347deg); transform: rotate(347deg); display: block; }
.pace-progress[data-progress="60"] .pace-progress-inner:after { -webkit-transform: rotate(351deg); -ms-transform: rotate(351deg); transform: rotate(351deg); display: block; }
.pace-progress[data-progress="61"] .pace-progress-inner:after { -webkit-transform: rotate(355deg); -ms-transform: rotate(355deg); transform: rotate(355deg); display: block; }
.pace-progress[data-progress="62"] .pace-progress-inner:after { -webkit-transform: rotate(358deg); -ms-transform: rotate(358deg); transform: rotate(358deg); display: block; }
.pace-progress[data-progress="63"] .pace-progress-inner:after { -webkit-transform: rotate(362deg); -ms-transform: rotate(362deg); transform: rotate(362deg); display: block; }
.pace-progress[data-progress="64"] .pace-progress-inner:after { -webkit-transform: rotate(365deg); -ms-transform: rotate(365deg); transform: rotate(365deg); display: block; }
.pace-progress[data-progress="65"] .pace-progress-inner:after { -webkit-transform: rotate(369deg); -ms-transform: rotate(369deg); transform: rotate(369deg); display: block; }
.pace-progress[data-progress="66"] .pace-progress-inner:after { -webkit-transform: rotate(373deg); -ms-transform: rotate(373deg); transform: rotate(373deg); display: block; }
.pace-progress[data-progress="67"] .pace-progress-inner:after { -webkit-transform: rotate(376deg); -ms-transform: rotate(376deg); transform: rotate(376deg); display: block; }
.pace-progress[data-progress="68"] .pace-progress-inner:after { -webkit-transform: rotate(380deg); -ms-transform: rotate(380deg); transform: rotate(380deg); display: block; }
.pace-progress[data-progress="69"] .pace-progress-inner:after { -webkit-transform: rotate(383deg); -ms-transform: rotate(383deg); transform: rotate(383deg); display: block; }
.pace-progress[data-progress="70"] .pace-progress-inner:after { -webkit-transform: rotate(387deg); -ms-transform: rotate(387deg); transform: rotate(387deg); display: block; }
.pace-progress[data-progress="71"] .pace-progress-inner:after { -webkit-transform: rotate(391deg); -ms-transform: rotate(391deg); transform: rotate(391deg); display: block; }
.pace-progress[data-progress="72"] .pace-progress-inner:after { -webkit-transform: rotate(394deg); -ms-transform: rotate(394deg); transform: rotate(394deg); display: block; }
.pace-progress[data-progress="73"] .pace-progress-inner:after { -webkit-transform: rotate(398deg); -ms-transform: rotate(398deg); transform: rotate(398deg); display: block; }
.pace-progress[data-progress="74"] .pace-progress-inner:after { -webkit-transform: rotate(401deg); -ms-transform: rotate(401deg); transform: rotate(401deg); display: block; }
.pace-progress[data-progress="75"] .pace-progress-inner:after { -webkit-transform: rotate(405deg); -ms-transform: rotate(405deg); transform: rotate(405deg); display: block; }
.pace-progress[data-progress="76"] .pace-progress-inner:after { -webkit-transform: rotate(409deg); -ms-transform: rotate(409deg); transform: rotate(409deg); display: block; }
.pace-progress[data-progress="77"] .pace-progress-inner:after { -webkit-transform: rotate(412deg); -ms-transform: rotate(412deg); transform: rotate(412deg); display: block; }
.pace-progress[data-progress="78"] .pace-progress-inner:after { -webkit-transform: rotate(416deg); -ms-transform: rotate(416deg); transform: rotate(416deg); display: block; }
.pace-progress[data-progress="79"] .pace-progress-inner:after { -webkit-transform: rotate(419deg); -ms-transform: rotate(419deg); transform: rotate(419deg); display: block; }
.pace-progress[data-progress="80"] .pace-progress-inner:after { -webkit-transform: rotate(423deg); -ms-transform: rotate(423deg); transform: rotate(423deg); display: block; }
.pace-progress[data-progress="81"] .pace-progress-inner:after { -webkit-transform: rotate(427deg); -ms-transform: rotate(427deg); transform: rotate(427deg); display: block; }
.pace-progress[data-progress="82"] .pace-progress-inner:after { -webkit-transform: rotate(430deg); -ms-transform: rotate(430deg); transform: rotate(430deg); display: block; }
.pace-progress[data-progress="83"] .pace-progress-inner:after { -webkit-transform: rotate(434deg); -ms-transform: rotate(434deg); transform: rotate(434deg); display: block; }
.pace-progress[data-progress="84"] .pace-progress-inner:after { -webkit-transform: rotate(437deg); -ms-transform: rotate(437deg); transform: rotate(437deg); display: block; }
.pace-progress[data-progress="85"] .pace-progress-inner:after { -webkit-transform: rotate(441deg); -ms-transform: rotate(441deg); transform: rotate(441deg); display: block; }
.pace-progress[data-progress="86"] .pace-progress-inner:after { -webkit-transform: rotate(445deg); -ms-transform: rotate(445deg); transform: rotate(445deg); display: block; }
.pace-progress[data-progress="87"] .pace-progress-inner:after { -webkit-transform: rotate(448deg); -ms-transform: rotate(448deg); transform: rotate(448deg); display: block; }
.pace-progress[data-progress="88"] .pace-progress-inner:after { -webkit-transform: rotate(452deg); -ms-transform: rotate(452deg); transform: rotate(452deg); display: block; }
.pace-progress[data-progress="89"] .pace-progress-inner:after { -webkit-transform: rotate(455deg); -ms-transform: rotate(455deg); transform: rotate(455deg); display: block; }
.pace-progress[data-progress="90"] .pace-progress-inner:after { -webkit-transform: rotate(459deg); -ms-transform: rotate(459deg); transform: rotate(459deg); display: block; }
.pace-progress[data-progress="91"] .pace-progress-inner:after { -webkit-transform: rotate(463deg); -ms-transform: rotate(463deg); transform: rotate(463deg); display: block; }
.pace-progress[data-progress="92"] .pace-progress-inner:after { -webkit-transform: rotate(466deg); -ms-transform: rotate(466deg); transform: rotate(466deg); display: block; }
.pace-progress[data-progress="93"] .pace-progress-inner:after { -webkit-transform: rotate(470deg); -ms-transform: rotate(470deg); transform: rotate(470deg); display: block; }
.pace-progress[data-progress="94"] .pace-progress-inner:after { -webkit-transform: rotate(473deg); -ms-transform: rotate(473deg); transform: rotate(473deg); display: block; }
.pace-progress[data-progress="95"] .pace-progress-inner:after { -webkit-transform: rotate(477deg); -ms-transform: rotate(477deg); transform: rotate(477deg); display: block; }
.pace-progress[data-progress="96"] .pace-progress-inner:after { -webkit-transform: rotate(481deg); -ms-transform: rotate(481deg); transform: rotate(481deg); display: block; }
.pace-progress[data-progress="97"] .pace-progress-inner:after { -webkit-transform: rotate(484deg); -ms-transform: rotate(484deg); transform: rotate(484deg); display: block; }
.pace-progress[data-progress="98"] .pace-progress-inner:after { -webkit-transform: rotate(488deg); -ms-transform: rotate(488deg); transform: rotate(488deg); display: block; }
.pace-progress[data-progress="99"] .pace-progress-inner:after { -webkit-transform: rotate(491deg); -ms-transform: rotate(491deg); transform: rotate(491deg); display: block; }
.pace-progress[data-progress="100"] .pace-progress-inner:after { -webkit-transform: rotate(495deg); -ms-transform: rotate(495deg); transform: rotate(495deg); display: block; }
.pace-progress[data-progress="00"] .pace-progress-inner { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg);}
.pace-progress[data-progress="01"] .pace-progress-inner { -webkit-transform: rotate(4deg); -ms-transform: rotate(4deg); transform: rotate(4deg);}
.pace-progress[data-progress="02"] .pace-progress-inner { -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg);}
.pace-progress[data-progress="03"] .pace-progress-inner { -webkit-transform: rotate(11deg); -ms-transform: rotate(11deg); transform: rotate(11deg);}
.pace-progress[data-progress="04"] .pace-progress-inner { -webkit-transform: rotate(14deg); -ms-transform: rotate(14deg); transform: rotate(14deg);}
.pace-progress[data-progress="05"] .pace-progress-inner { -webkit-transform: rotate(18deg); -ms-transform: rotate(18deg); transform: rotate(18deg);}
.pace-progress[data-progress="06"] .pace-progress-inner { -webkit-transform: rotate(22deg); -ms-transform: rotate(22deg); transform: rotate(22deg);}
.pace-progress[data-progress="07"] .pace-progress-inner { -webkit-transform: rotate(25deg); -ms-transform: rotate(25deg); transform: rotate(25deg);}
.pace-progress[data-progress="08"] .pace-progress-inner { -webkit-transform: rotate(29deg); -ms-transform: rotate(29deg); transform: rotate(29deg);}
.pace-progress[data-progress="09"] .pace-progress-inner { -webkit-transform: rotate(32deg); -ms-transform: rotate(32deg); transform: rotate(32deg);}
.pace-progress[data-progress="10"] .pace-progress-inner { -webkit-transform: rotate(36deg); -ms-transform: rotate(36deg); transform: rotate(36deg);}
.pace-progress[data-progress="11"] .pace-progress-inner { -webkit-transform: rotate(40deg); -ms-transform: rotate(40deg); transform: rotate(40deg);}
.pace-progress[data-progress="12"] .pace-progress-inner { -webkit-transform: rotate(43deg); -ms-transform: rotate(43deg); transform: rotate(43deg);}
.pace-progress[data-progress="13"] .pace-progress-inner { -webkit-transform: rotate(47deg); -ms-transform: rotate(47deg); transform: rotate(47deg);}
.pace-progress[data-progress="14"] .pace-progress-inner { -webkit-transform: rotate(50deg); -ms-transform: rotate(50deg); transform: rotate(50deg);}
.pace-progress[data-progress="15"] .pace-progress-inner { -webkit-transform: rotate(54deg); -ms-transform: rotate(54deg); transform: rotate(54deg);}
.pace-progress[data-progress="16"] .pace-progress-inner { -webkit-transform: rotate(58deg); -ms-transform: rotate(58deg); transform: rotate(58deg);}
.pace-progress[data-progress="17"] .pace-progress-inner { -webkit-transform: rotate(61deg); -ms-transform: rotate(61deg); transform: rotate(61deg);}
.pace-progress[data-progress="18"] .pace-progress-inner { -webkit-transform: rotate(65deg); -ms-transform: rotate(65deg); transform: rotate(65deg);}
.pace-progress[data-progress="19"] .pace-progress-inner { -webkit-transform: rotate(68deg); -ms-transform: rotate(68deg); transform: rotate(68deg);}
.pace-progress[data-progress="20"] .pace-progress-inner { -webkit-transform: rotate(72deg); -ms-transform: rotate(72deg); transform: rotate(72deg);}
.pace-progress[data-progress="21"] .pace-progress-inner { -webkit-transform: rotate(76deg); -ms-transform: rotate(76deg); transform: rotate(76deg);}
.pace-progress[data-progress="22"] .pace-progress-inner { -webkit-transform: rotate(79deg); -ms-transform: rotate(79deg); transform: rotate(79deg);}
.pace-progress[data-progress="23"] .pace-progress-inner { -webkit-transform: rotate(83deg); -ms-transform: rotate(83deg); transform: rotate(83deg);}
.pace-progress[data-progress="24"] .pace-progress-inner { -webkit-transform: rotate(86deg); -ms-transform: rotate(86deg); transform: rotate(86deg);}
.pace-progress[data-progress="25"] .pace-progress-inner { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg);}
.pace-progress[data-progress="26"] .pace-progress-inner { -webkit-transform: rotate(94deg); -ms-transform: rotate(94deg); transform: rotate(94deg);}
.pace-progress[data-progress="27"] .pace-progress-inner { -webkit-transform: rotate(97deg); -ms-transform: rotate(97deg); transform: rotate(97deg);}
.pace-progress[data-progress="28"] .pace-progress-inner { -webkit-transform: rotate(101deg); -ms-transform: rotate(101deg); transform: rotate(101deg);}
.pace-progress[data-progress="29"] .pace-progress-inner { -webkit-transform: rotate(104deg); -ms-transform: rotate(104deg); transform: rotate(104deg);}
.pace-progress[data-progress="30"] .pace-progress-inner { -webkit-transform: rotate(108deg); -ms-transform: rotate(108deg); transform: rotate(108deg);}
.pace-progress[data-progress="31"] .pace-progress-inner { -webkit-transform: rotate(112deg); -ms-transform: rotate(112deg); transform: rotate(112deg);}
.pace-progress[data-progress="32"] .pace-progress-inner { -webkit-transform: rotate(115deg); -ms-transform: rotate(115deg); transform: rotate(115deg);}
.pace-progress[data-progress="33"] .pace-progress-inner { -webkit-transform: rotate(119deg); -ms-transform: rotate(119deg); transform: rotate(119deg);}
.pace-progress[data-progress="34"] .pace-progress-inner { -webkit-transform: rotate(122deg); -ms-transform: rotate(122deg); transform: rotate(122deg);}
.pace-progress[data-progress="35"] .pace-progress-inner { -webkit-transform: rotate(126deg); -ms-transform: rotate(126deg); transform: rotate(126deg);}
.pace-progress[data-progress="36"] .pace-progress-inner { -webkit-transform: rotate(130deg); -ms-transform: rotate(130deg); transform: rotate(130deg);}
.pace-progress[data-progress="37"] .pace-progress-inner { -webkit-transform: rotate(133deg); -ms-transform: rotate(133deg); transform: rotate(133deg);}
.pace-progress[data-progress="38"] .pace-progress-inner { -webkit-transform: rotate(137deg); -ms-transform: rotate(137deg); transform: rotate(137deg);}
.pace-progress[data-progress="39"] .pace-progress-inner { -webkit-transform: rotate(140deg); -ms-transform: rotate(140deg); transform: rotate(140deg);}
.pace-progress[data-progress="40"] .pace-progress-inner { -webkit-transform: rotate(144deg); -ms-transform: rotate(144deg); transform: rotate(144deg);}
.pace-progress[data-progress="41"] .pace-progress-inner { -webkit-transform: rotate(148deg); -ms-transform: rotate(148deg); transform: rotate(148deg);}
.pace-progress[data-progress="42"] .pace-progress-inner { -webkit-transform: rotate(151deg); -ms-transform: rotate(151deg); transform: rotate(151deg);}
.pace-progress[data-progress="43"] .pace-progress-inner { -webkit-transform: rotate(155deg); -ms-transform: rotate(155deg); transform: rotate(155deg);}
.pace-progress[data-progress="44"] .pace-progress-inner { -webkit-transform: rotate(158deg); -ms-transform: rotate(158deg); transform: rotate(158deg);}
.pace-progress[data-progress="45"] .pace-progress-inner { -webkit-transform: rotate(162deg); -ms-transform: rotate(162deg); transform: rotate(162deg);}
.pace-progress[data-progress="46"] .pace-progress-inner { -webkit-transform: rotate(166deg); -ms-transform: rotate(166deg); transform: rotate(166deg);}
.pace-progress[data-progress="47"] .pace-progress-inner { -webkit-transform: rotate(169deg); -ms-transform: rotate(169deg); transform: rotate(169deg);}
.pace-progress[data-progress="48"] .pace-progress-inner { -webkit-transform: rotate(173deg); -ms-transform: rotate(173deg); transform: rotate(173deg);}
.pace-progress[data-progress="49"] .pace-progress-inner { -webkit-transform: rotate(176deg); -ms-transform: rotate(176deg); transform: rotate(176deg);}
.pace-progress[data-progress="50"] .pace-progress-inner { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg);}
.pace-progress[data-progress="51"] .pace-progress-inner { -webkit-transform: rotate(184deg); -ms-transform: rotate(184deg); transform: rotate(184deg); overflow: visible;}
.pace-progress[data-progress="52"] .pace-progress-inner { -webkit-transform: rotate(187deg); -ms-transform: rotate(187deg); transform: rotate(187deg); overflow: visible;}
.pace-progress[data-progress="53"] .pace-progress-inner { -webkit-transform: rotate(191deg); -ms-transform: rotate(191deg); transform: rotate(191deg); overflow: visible;}
.pace-progress[data-progress="54"] .pace-progress-inner { -webkit-transform: rotate(194deg); -ms-transform: rotate(194deg); transform: rotate(194deg); overflow: visible;}
.pace-progress[data-progress="55"] .pace-progress-inner { -webkit-transform: rotate(198deg); -ms-transform: rotate(198deg); transform: rotate(198deg); overflow: visible;}
.pace-progress[data-progress="56"] .pace-progress-inner { -webkit-transform: rotate(202deg); -ms-transform: rotate(202deg); transform: rotate(202deg); overflow: visible;}
.pace-progress[data-progress="57"] .pace-progress-inner { -webkit-transform: rotate(205deg); -ms-transform: rotate(205deg); transform: rotate(205deg); overflow: visible;}
.pace-progress[data-progress="58"] .pace-progress-inner { -webkit-transform: rotate(209deg); -ms-transform: rotate(209deg); transform: rotate(209deg); overflow: visible;}
.pace-progress[data-progress="59"] .pace-progress-inner { -webkit-transform: rotate(212deg); -ms-transform: rotate(212deg); transform: rotate(212deg); overflow: visible;}
.pace-progress[data-progress="60"] .pace-progress-inner { -webkit-transform: rotate(216deg); -ms-transform: rotate(216deg); transform: rotate(216deg); overflow: visible;}
.pace-progress[data-progress="61"] .pace-progress-inner { -webkit-transform: rotate(220deg); -ms-transform: rotate(220deg); transform: rotate(220deg); overflow: visible;}
.pace-progress[data-progress="62"] .pace-progress-inner { -webkit-transform: rotate(223deg); -ms-transform: rotate(223deg); transform: rotate(223deg); overflow: visible;}
.pace-progress[data-progress="63"] .pace-progress-inner { -webkit-transform: rotate(227deg); -ms-transform: rotate(227deg); transform: rotate(227deg); overflow: visible;}
.pace-progress[data-progress="64"] .pace-progress-inner { -webkit-transform: rotate(230deg); -ms-transform: rotate(230deg); transform: rotate(230deg); overflow: visible;}
.pace-progress[data-progress="65"] .pace-progress-inner { -webkit-transform: rotate(234deg); -ms-transform: rotate(234deg); transform: rotate(234deg); overflow: visible;}
.pace-progress[data-progress="66"] .pace-progress-inner { -webkit-transform: rotate(238deg); -ms-transform: rotate(238deg); transform: rotate(238deg); overflow: visible;}
.pace-progress[data-progress="67"] .pace-progress-inner { -webkit-transform: rotate(241deg); -ms-transform: rotate(241deg); transform: rotate(241deg); overflow: visible;}
.pace-progress[data-progress="68"] .pace-progress-inner { -webkit-transform: rotate(245deg); -ms-transform: rotate(245deg); transform: rotate(245deg); overflow: visible;}
.pace-progress[data-progress="69"] .pace-progress-inner { -webkit-transform: rotate(248deg); -ms-transform: rotate(248deg); transform: rotate(248deg); overflow: visible;}
.pace-progress[data-progress="70"] .pace-progress-inner { -webkit-transform: rotate(252deg); -ms-transform: rotate(252deg); transform: rotate(252deg); overflow: visible;}
.pace-progress[data-progress="71"] .pace-progress-inner { -webkit-transform: rotate(256deg); -ms-transform: rotate(256deg); transform: rotate(256deg); overflow: visible;}
.pace-progress[data-progress="72"] .pace-progress-inner { -webkit-transform: rotate(259deg); -ms-transform: rotate(259deg); transform: rotate(259deg); overflow: visible;}
.pace-progress[data-progress="73"] .pace-progress-inner { -webkit-transform: rotate(263deg); -ms-transform: rotate(263deg); transform: rotate(263deg); overflow: visible;}
.pace-progress[data-progress="74"] .pace-progress-inner { -webkit-transform: rotate(266deg); -ms-transform: rotate(266deg); transform: rotate(266deg); overflow: visible;}
.pace-progress[data-progress="75"] .pace-progress-inner { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); overflow: visible;}
.pace-progress[data-progress="76"] .pace-progress-inner { -webkit-transform: rotate(274deg); -ms-transform: rotate(274deg); transform: rotate(274deg); overflow: visible;}
.pace-progress[data-progress="77"] .pace-progress-inner { -webkit-transform: rotate(277deg); -ms-transform: rotate(277deg); transform: rotate(277deg); overflow: visible;}
.pace-progress[data-progress="78"] .pace-progress-inner { -webkit-transform: rotate(281deg); -ms-transform: rotate(281deg); transform: rotate(281deg); overflow: visible;}
.pace-progress[data-progress="79"] .pace-progress-inner { -webkit-transform: rotate(284deg); -ms-transform: rotate(284deg); transform: rotate(284deg); overflow: visible;}
.pace-progress[data-progress="80"] .pace-progress-inner { -webkit-transform: rotate(288deg); -ms-transform: rotate(288deg); transform: rotate(288deg); overflow: visible;}
.pace-progress[data-progress="81"] .pace-progress-inner { -webkit-transform: rotate(292deg); -ms-transform: rotate(292deg); transform: rotate(292deg); overflow: visible;}
.pace-progress[data-progress="82"] .pace-progress-inner { -webkit-transform: rotate(295deg); -ms-transform: rotate(295deg); transform: rotate(295deg); overflow: visible;}
.pace-progress[data-progress="83"] .pace-progress-inner { -webkit-transform: rotate(299deg); -ms-transform: rotate(299deg); transform: rotate(299deg); overflow: visible;}
.pace-progress[data-progress="84"] .pace-progress-inner { -webkit-transform: rotate(302deg); -ms-transform: rotate(302deg); transform: rotate(302deg); overflow: visible;}
.pace-progress[data-progress="85"] .pace-progress-inner { -webkit-transform: rotate(306deg); -ms-transform: rotate(306deg); transform: rotate(306deg); overflow: visible;}
.pace-progress[data-progress="86"] .pace-progress-inner { -webkit-transform: rotate(310deg); -ms-transform: rotate(310deg); transform: rotate(310deg); overflow: visible;}
.pace-progress[data-progress="87"] .pace-progress-inner { -webkit-transform: rotate(313deg); -ms-transform: rotate(313deg); transform: rotate(313deg); overflow: visible;}
.pace-progress[data-progress="88"] .pace-progress-inner { -webkit-transform: rotate(317deg); -ms-transform: rotate(317deg); transform: rotate(317deg); overflow: visible;}
.pace-progress[data-progress="89"] .pace-progress-inner { -webkit-transform: rotate(320deg); -ms-transform: rotate(320deg); transform: rotate(320deg); overflow: visible;}
.pace-progress[data-progress="90"] .pace-progress-inner { -webkit-transform: rotate(324deg); -ms-transform: rotate(324deg); transform: rotate(324deg); overflow: visible;}
.pace-progress[data-progress="91"] .pace-progress-inner { -webkit-transform: rotate(328deg); -ms-transform: rotate(328deg); transform: rotate(328deg); overflow: visible;}
.pace-progress[data-progress="92"] .pace-progress-inner { -webkit-transform: rotate(331deg); -ms-transform: rotate(331deg); transform: rotate(331deg); overflow: visible;}
.pace-progress[data-progress="93"] .pace-progress-inner { -webkit-transform: rotate(335deg); -ms-transform: rotate(335deg); transform: rotate(335deg); overflow: visible;}
.pace-progress[data-progress="94"] .pace-progress-inner { -webkit-transform: rotate(338deg); -ms-transform: rotate(338deg); transform: rotate(338deg); overflow: visible;}
.pace-progress[data-progress="95"] .pace-progress-inner { -webkit-transform: rotate(342deg); -ms-transform: rotate(342deg); transform: rotate(342deg); overflow: visible;}
.pace-progress[data-progress="96"] .pace-progress-inner { -webkit-transform: rotate(346deg); -ms-transform: rotate(346deg); transform: rotate(346deg); overflow: visible;}
.pace-progress[data-progress="97"] .pace-progress-inner { -webkit-transform: rotate(349deg); -ms-transform: rotate(349deg); transform: rotate(349deg); overflow: visible;}
.pace-progress[data-progress="98"] .pace-progress-inner { -webkit-transform: rotate(353deg); -ms-transform: rotate(353deg); transform: rotate(353deg); overflow: visible;}
.pace-progress[data-progress="99"] .pace-progress-inner { -webkit-transform: rotate(356deg); -ms-transform: rotate(356deg); transform: rotate(356deg); overflow: visible;}
.pace-progress[data-progress="100"] .pace-progress-inner { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); overflow: visible;}
================================================
FILE: templates/pace-theme-minimal.tmpl.css
================================================
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.pace-inactive {
display: none;
}
.pace .pace-progress {
background: `args.color || "#29d"`;
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 2px;
}
================================================
FILE: themes/black/pace-theme-barber-shop.css
================================================
/* This is a compiled file, you should be editing the file in the templates directory */
.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: #000000;
position: fixed;
top: 0;
bottom: 0;
right: 100%;
width: 100%;
overflow: hidden;
height: 12px;
}
.pace .pace-activity {
position: fixed;
top: 0;
right: -32px;
bottom: 0;
left: 0;
height: 12px;
-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); }
}
================================================
FILE: themes/black/pace-theme-big-counter.css
================================================
/* This is a compiled file, you should be editing the file in the templates directory */
.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);
}
================================================
FILE: themes/black/pace-theme-bounce.css
================================================
/* This is a compiled file, you should be editing the file in the templates directory */
.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: #000000;
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;
}
}
================================================
FILE: themes/black/pace-theme-center-atom.css
================================================
/* This is a compiled file, you should be editing the file in the templates directory */
.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: #000000;
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 #000000;
content: ' ';
display: block;
position: absolute;
top: 0;
left: 0;
height: 60px;
width: 100px;
}
.pace .pace-activity:after {
border-radius: 50%;
border: 5px solid #000000;
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 #000000;
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) }
}
================================================
FILE: themes/black/pace-theme-center-circle.css
================================================
/* This is a compiled file, you should be editing the file in the templates directory */
.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(0, 0, 0, 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) }
}
================================================
FILE: themes/black/pace-theme-center-radar.css
================================================
/* This is a compiled file, you should be editing the file in the templates directory */
.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: #000000 transparent transparent;
border-radius: 50%;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-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: #000000 transparent transparent;
border-radius: 50%;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
@-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); }
}
================================================
FILE: themes/black/pace-theme-center-simple.css
================================================
/* This is a compiled file, you should be editing the file in the templates directory */
.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 #000000;
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: #000000;
}
.pace.pace-inactive {
display: none;
}
================================================
FILE: themes/black/pace-theme-corner-indicator.css
================================================
/* This is a compiled file, you should be editing the file in the templates directory */
.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: #000000;
-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); }
}
================================================
FILE: themes/black/pace-theme-fill-left.css
================================================
/* This is a compiled file, you should be editing the file in the templates directory */
.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%;
}
================================================
FILE: themes/black/pace-theme-flash.css
================================================
/* This is a compiled file, you should be editing the file in the templates directory */
.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: #000000;
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 #000000, 0 0 5px #000000;
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: #000000;
border-left-color: #000000;
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); }
}
================================================
FILE: themes/black/pace-theme-flat-top.css
================================================
/* This is a compiled file, you should be editing the file in the templates directory */
.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: transform .5s ease-out;
-ms-transition: 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: #000000;
pointer-events: none;
}
================================================
FILE: themes/black/pace-theme-loading-bar.css
================================================
/* This is a compiled file, you should be editing the file in the templates directory */
.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: #000000;
color: #000000;
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 #000000, inset 0 0 0 7px #FFF;
border-radius: 10px;
}
.pace.pace-inactive {
display: none;
}
================================================
FILE: themes/black/pace-theme-mac-osx.css
================================================
/* This is a compiled file, you should be editing the file in the templates directory */
.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: #000000;
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 #000000, inset 0 -1px #000000, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3);
-moz-box-shadow: inset -1px 0 #000000, inset 0 -1px #000000, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3);
-o-box-shadow: inset -1px 0 #000000, inset 0 -1px #000000, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3);
box-shadow: inset -1px 0 #000000, inset 0 -1px #000000, 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); }
}
================================================
FILE: themes/black/pace-theme-material.css
================================================
/* This is a compiled file, you should be editing the file in the templates directory */
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #000000;
}
.pace-progress {
position: fixed;
z-index: 2000;
top: 50%;
left: 50%;
margin-left: -2.5rem;
margin-top: -2.5rem;
height: 5rem;
width: 5rem;
opacity: 1;
-webkit-transition: opacity 0.1s;
transition: opacity 0.1s;
-webkit-transform: translate3d(0, 0, 0) !important;
-ms-transform: translate3d(0, 0, 0) !important;
transform: translate3d(0, 0, 0) !important;
}
.pace-inactive .pace-progress,
.pace-progress[data-progress="00"] {
opacity: 0;
}
.pace-progress:after {
height: 5rem;
width: 5rem;
text-align: center;
line-height: 5rem;
content: attr(data-progress);
display: block;
font-size: 1.8rem;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 300;
}
.pace-progress .pace-progress-inner {
overflow: hidden;
position: absolute;
width: 2.5rem;
height: 5rem;
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-transition: -webkit-transform 0.1s;
transition: transform 0.1s;
left: 2.5rem;
top: 0;
}
.pace-progress .pace-progress-inner:before,
.pace-progress .pace-progress-inner:after {
position: absolute;
width: 5rem;
height: 5rem;
content: ' ';
left: -2.5rem;
top: 0;
box-sizing: border-box;
border: 1px solid;
border-radius: 5rem;
}
.pace-progress .pace-progress-inner:before {
border-right-color: transparent;
border-bottom-color: transparent;
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
}
.pace-progress .pace-progress-inner:after {
border-left-color: transparent;
border-top-color: transparent;
display: none;
-webkit-transform: rotate(315deg);
-ms-transform: rotate(315deg);
transform: rotate(315deg);
}
.pace-progress[data-progress="00"] .pace-progress-inner:before { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
.pace-progress[data-progress="01"] .pace-progress-inner:before { -webkit-transform: rotate(-41deg); -ms-transform: rotate(-41deg); transform: rotate(-41deg); }
.pace-progress[data-progress="02"] .pace-progress-inner:before { -webkit-transform: rotate(-38deg); -ms-transform: rotate(-38deg); transform: rotate(-38deg); }
.pace-progress[data-progress="03"] .pace-progress-inner:before { -webkit-transform: rotate(-34deg); -ms-transform: rotate(-34deg); transform: rotate(-34deg); }
.pace-progress[data-progress="04"] .pace-progress-inner:before { -webkit-transform: rotate(-31deg); -ms-transform: rotate(-31deg); transform: rotate(-31deg); }
.pace-progress[data-progress="05"] .pace-progress-inner:before { -webkit-transform: rotate(-27deg); -ms-transform: rotate(-27deg); transform: rotate(-27deg); }
.pace-progress[data-progress="06"] .pace-progress-inner:before { -webkit-transform: rotate(-23deg); -ms-transform: rotate(-23deg); transform: rotate(-23deg); }
.pace-progress[data-progress="07"] .pace-progress-inner:before { -webkit-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg); }
.pace-progress[data-progress="08"] .pace-progress-inner:before { -webkit-transform: rotate(-16deg); -ms-transform: rotate(-16deg); transform: rotate(-16deg); }
.pace-progress[data-progress="09"] .pace-progress-inner:before { -webkit-transform: rotate(-13deg); -ms-transform: rotate(-13deg); transform: rotate(-13deg); }
.pace-progress[data-progress="10"] .pace-progress-inner:before { -webkit-transform: rotate(-9deg); -ms-transform: rotate(-9deg); transform: rotate(-9deg); }
.pace-progress[data-progress="11"] .pace-progress-inner:before { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); }
.pace-progress[data-progress="12"] .pace-progress-inner:before { -webkit-transform: rotate(-2deg); -ms-transform: rotate(-2deg); transform: rotate(-2deg); }
.pace-progress[data-progress="13"] .pace-progress-inner:before { -webkit-transform: rotate(2deg); -ms-transform: rotate(2deg); transform: rotate(2deg); }
.pace-progress[data-progress="14"] .pace-progress-inner:before { -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); }
.pace-progress[data-progress="15"] .pace-progress-inner:before { -webkit-transform: rotate(9deg); -ms-transform: rotate(9deg); transform: rotate(9deg); }
.pace-progress[data-progress="16"] .pace-progress-inner:before { -webkit-transform: rotate(13deg); -ms-transform: rotate(13deg); transform: rotate(13deg); }
.pace-progress[data-progress="17"] .pace-progress-inner:before { -webkit-transform: rotate(16deg); -ms-transform: rotate(16deg); transform: rotate(16deg); }
.pace-progress[data-progress="18"] .pace-progress-inner:before { -webkit-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg); }
.pace-progress[data-progress="19"] .pace-progress-inner:before { -webkit-transform: rotate(23deg); -ms-transform: rotate(23deg); transform: rotate(23deg); }
.pace-progress[data-progress="20"] .pace-progress-inner:before { -webkit-transform: rotate(27deg); -ms-transform: rotate(27deg); transform: rotate(27deg); }
.pace-progress[data-progress="21"] .pace-progress-inner:before { -webkit-transform: rotate(31deg); -ms-transform: rotate(31deg); transform: rotate(31deg); }
.pace-progress[data-progress="22"] .pace-progress-inner:before { -webkit-transform: rotate(34deg); -ms-transform: rotate(34deg); transform: rotate(34deg); }
.pace-progress[data-progress="23"] .pace-progress-inner:before { -webkit-transform: rotate(38deg); -ms-transform: rotate(38deg); transform: rotate(38deg); }
.pace-progress[data-progress="24"] .pace-progress-inner:before { -webkit-transform: rotate(41deg); -ms-transform: rotate(41deg); transform: rotate(41deg); }
.pace-progress[data-progress="25"] .pace-progress-inner:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.pace-progress[data-progress="26"] .pace-progress-inner:before { -webkit-transform: rotate(49deg); -ms-transform: rotate(49deg); transform: rotate(49deg); }
.pace-progress[data-progress="27"] .pace-progress-inner:before { -webkit-transform: rotate(52deg); -ms-transform: rotate(52deg); transform: rotate(52deg); }
.pace-progress[data-progress="28"] .pace-progress-inner:before { -webkit-transform: rotate(56deg); -ms-transform: rotate(56deg); transform: rotate(56deg); }
.pace-progress[data-progress="29"] .pace-progress-inner:before { -webkit-transform: rotate(59deg); -ms-transform: rotate(59deg); transform: rotate(59deg); }
.pace-progress[data-progress="30"] .pace-progress-inner:before { -webkit-transform: rotate(63deg); -ms-transform: rotate(63deg); transform: rotate(63deg); }
.pace-progress[data-progress="31"] .pace-progress-inner:before { -webkit-transform: rotate(67deg); -ms-transform: rotate(67deg); transform: rotate(67deg); }
.pace-progress[data-progress="32"] .pace-progress-inner:before { -webkit-transform: rotate(70deg); -ms-transform: rotate(70deg); transform: rotate(70deg); }
.pace-progress[data-progress="33"] .pace-progress-inner:before { -webkit-transform: rotate(74deg); -ms-transform: rotate(74deg); transform: rotate(74deg); }
.pace-progress[data-progress="34"] .pace-progress-inner:before { -webkit-transform: rotate(77deg); -ms-transform: rotate(77deg); transform: rotate(77deg); }
.pace-progress[data-progress="35"] .pace-progress-inner:before { -webkit-transform: rotate(81deg); -ms-transform: rotate(81deg); transform: rotate(81deg); }
.pace-progress[data-progress="36"] .pace-progress-inner:before { -webkit-transform: rotate(85deg); -ms-transform: rotate(85deg); transform: rotate(85deg); }
.pace-progress[data-progress="37"] .pace-progress-inner:before { -webkit-transform: rotate(88deg); -ms-transform: rotate(88deg); transform: rotate(88deg); }
.pace-progress[data-progress="38"] .pace-progress-inner:before { -webkit-transform: rotate(92deg); -ms-transform: rotate(92deg); transform: rotate(92deg); }
.pace-progress[data-progress="39"] .pace-progress-inner:before { -webkit-transform: rotate(95deg); -ms-transform: rotate(95deg); transform: rotate(95deg); }
.pace-progress[data-progress="40"] .pace-progress-inner:before { -webkit-transform: rotate(99deg); -ms-transform: rotate(99deg); transform: rotate(99deg); }
.pace-progress[data-progress="41"] .pace-progress-inner:before { -webkit-transform: rotate(103deg); -ms-transform: rotate(103deg); transform: rotate(103deg); }
.pace-progress[data-progress="42"] .pace-progress-inner:before { -webkit-transform: rotate(106deg); -ms-transform: rotate(106deg); transform: rotate(106deg); }
.pace-progress[data-progress="43"] .pace-progress-inner:before { -webkit-transform: rotate(110deg); -ms-transform: rotate(110deg); transform: rotate(110deg); }
.pace-progress[data-progress="44"] .pace-progress-inner:before { -webkit-transform: rotate(113deg); -ms-transform: rotate(113deg); transform: rotate(113deg); }
.pace-progress[data-progress="45"] .pace-progress-inner:before { -webkit-transform: rotate(117deg); -ms-transform: rotate(117deg); transform: rotate(117deg); }
.pace-progress[data-progress="46"] .pace-progress-inner:before { -webkit-transform: rotate(121deg); -ms-transform: rotate(121deg); transform: rotate(121deg); }
.pace-progress[data-progress="47"] .pace-progress-inner:before { -webkit-transform: rotate(124deg); -ms-transform: rotate(124deg); transform: rotate(124deg); }
.pace-progress[data-progress="48"] .pace-progress-inner:before { -webkit-transform: rotate(128deg); -ms-transform: rotate(128deg); transform: rotate(128deg); }
.pace-progress[data-progress="49"] .pace-progress-inner:before { -webkit-transform: rotate(131deg); -ms-transform: rotate(131deg); transform: rotate(131deg); }
.pace-progress[data-progress="50"] .pace-progress-inner:before { -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); }
.pace-progress[data-progress="50"] .pace-progress-inner:after { -webkit-transform: rotate(315deg); -ms-transform: rotate(315deg); transform: rotate(315deg); display: block; }
.pace-progress[data-progress="51"] .pace-progress-inner:after { -webkit-transform: rotate(319deg); -ms-transform: rotate(319deg); transform: rotate(319deg); display: block; }
.pace-progress[data-progress="52"] .pace-progress-inner:after { -webkit-transform: rotate(322deg); -ms-transform: rotate(322deg); transform: rotate(322deg); display: block; }
.pace-progress[data-progress="53"] .pace-progress-inner:after { -webkit-transform: rotate(326deg); -ms-transform: rotate(326deg); transform: rotate(326deg); display: block; }
.pace-progress[data-progress="54"] .pace-progress-inner:after { -webkit-transform: rotate(329deg); -ms-transform: rotate(329deg); transform: rotate(329deg); display: block; }
.pace-progress[data-progress="55"] .pace-progress-inner:after { -webkit-transform: rotate(333deg); -ms-transform: rotate(333deg); transform: rotate(333deg); display: block; }
.pace-progress[data-progress="56"] .pace-progress-inner:after { -webkit-transform: rotate(337deg); -ms-transform: rotate(337deg); transform: rotate(337deg); display: block; }
.pace-progress[data-progress="57"] .pace-progress-inner:after { -webkit-transform: rotate(340deg); -ms-transform: rotate(340deg); transform: rotate(340deg); display: block; }
.pace-progress[data-progress="58"] .pace-progress-inner:after { -webkit-transform: rotate(344deg); -ms-transform: rotate(344deg); transform: rotate(344deg); display: block; }
.pace-progress[data-progress="59"] .pace-progress-inner:after { -webkit-transform: rotate(347deg); -ms-transform: rotate(347deg); transform: rotate(347deg); display: block; }
.pace-progress[data-progress="60"] .pace-progress-inner:after { -webkit-transform: rotate(351deg); -ms-transform: rotate(351deg); transform: rotate(351deg); display: block; }
.pace-progress[data-progress="61"] .pace-progress-inner:after { -webkit-transform: rotate(355deg); -ms-transform: rotate(355deg); transform: rotate(355deg); display: block; }
.pace-progress[data-progress="62"] .pace-progress-inner:after { -webkit-transform: rotate(358deg); -ms-transform: rotate(358deg); transform: rotate(358deg); display: block; }
.pace-progress[data-progress="63"] .pace-progress-inner:after { -webkit-transform: rotate(362deg); -ms-transform: rotate(362deg); transform: rotate(362deg); display: block; }
.pace-progress[data-progress="64"] .pace-progress-inner:after { -webkit-transform: rotate(365deg); -ms-transform: rotate(365deg); transform: rotate(365deg); display: block; }
.pace-progress[data-progress="65"] .pace-progress-inner:after { -webkit-transform: rotate(369deg); -ms-transform: rotate(369deg); transform: rotate(369deg); display: block; }
.pace-progress[data-progress="66"] .pace-progress-inner:after { -webkit-transform: rotate(373deg); -ms-transform: rotate(373deg); transform: rotate(373deg); display: block; }
.pace-progress[data-progress="67"] .pace-progress-inner:after { -webkit-transform: rotate(376deg); -ms-transform: rotate(376deg); transform: rotate(376deg); display: block; }
.pace-progress[data-progress="68"] .pace-progress-inner:after { -webkit-transform: rotate(380deg); -ms-transform: rotate(380deg); transform: rotate(380deg); display: block; }
.pace-progress[data-progress="69"] .pace-progress-inner:after { -webkit-transform: rotate(383deg); -ms-transform: rotate(383deg); transform: rotate(383deg); display: block; }
.pace-progress[data-progress="70"] .pace-progress-inner:after { -webkit-transform: rotate(387deg); -ms-transform: rotate(387deg); transform: rotate(387deg); display: block; }
.pace-progress[data-progress="71"] .pace-progress-inner:after { -webkit-transform: rotate(391deg); -ms-transform: rotate(391deg); transform: rotate(391deg); display: block; }
.pace-progress[data-progress="72"] .pace-progress-inner:after { -webkit-transform: rotate(394deg); -ms-transform: rotate(394deg); transform: rotate(394deg); display: block; }
.pace-progress[data-progress="73"] .pace-progress-inner:after { -webkit-transform: rotate(398deg); -ms-transform: rotate(398deg); transform: rotate(398deg); display: block; }
.pace-progress[data-progress="74"] .pace-progress-inner:after { -webkit-transform: rotate(401deg); -ms-transform: rotate(401deg); transform: rotate(401deg); display: block; }
.pace-progress[data-progress="75"] .pace-progress-inner:after { -webkit-transform: rotate(405deg); -ms-transform: rotate(405deg); transform: rotate(405deg); display: block; }
.pace-progress[data-progress="76"] .pace-progress-inner:after { -webkit-transform: rotate(409deg); -ms-transform: rotate(409deg); transform: rotate(409deg); display: block; }
.pace-progress[data-progress="77"] .pace-progress-inner:after { -webkit-transform: rotate(412deg); -ms-transform: rotate(412deg); transform: rotate(412deg); display: block; }
.pace-progress[data-progress="78"] .pace-progress-inner:after { -webkit-transform: rotate(416deg); -ms-transform: rotate(416deg); transform: rotate(416deg); display: block; }
.pace-progress[data-progress="79"] .pace-progress-inner:after { -webkit-transform: rotate(419deg); -ms-transform: rotate(419deg); transform: rotate(419deg); display: block; }
.pace-progress[data-progress="80"] .pace-progress-inner:after { -webkit-transform: rotate(423deg); -ms-transform: rotate(423deg); transform: rotate(423deg); display: block; }
.pace-progress[data-progress="81"] .pace-progress-inner:after { -webkit-transform: rotate(427deg); -ms-transform: rotate(427deg); transform: rotate(427deg); display: block; }
.pace-progress[data-progress="82"] .pace-progress-inner:after { -webkit-transform: rotate(430deg); -ms-transform: rotate(430deg); transform: rotate(430deg); display: block; }
.pace-progress[data-progress="83"] .pace-progress-inner:after { -webkit-transform: rotate(434deg); -ms-transform: rotate(434deg); transform: rotate(434deg); display: block; }
.pace-progress[data-progress="84"] .pace-progress-inner:after { -webkit-transform: rotate(437deg); -ms-transform: rotate(437deg); transform: rotate(437deg); display: block; }
.pace-progress[data-progress="85"] .pace-progress-inner:after { -webkit-transform: rotate(441deg); -ms-transform: rotate(441deg); transform: rotate(441deg); display: block; }
.pace-progress[data-progress="86"] .pace-progress-inner:after { -webkit-transform: rotate(445deg); -ms-transform: rotate(445deg); transform: rotate(445deg); display: block; }
.pace-progress[data-progress="87"] .pace-progress-inner:after { -webkit-transform: rotate(448deg); -ms-transform: rotate(448deg); transform: rotate(448deg); display: block; }
.pace-progress[data-progress="88"] .pace-progress-inner:after { -webkit-transform: rotate(452deg); -ms-transform: rotate(452deg); transform: rotate(452deg); display: block; }
.pace-progress[data-progress="89"] .pace-progress-inner:after { -webkit-transform: rotate(455deg); -ms-transform: rotate(455deg); transform: rotate(455deg); display: block; }
.pace-progress[data-progress="90"] .pace-progress-inner:after { -webkit-transform: rotate(459deg); -ms-transform: rotate(459deg); transform: rotate(459deg); display: block; }
.pace-progress[data-progress="91"] .pace-progress-inner:after { -webkit-transform: rotate(463deg); -ms-transform: rotate(463deg); transform: rotate(463deg); display: block; }
.pace-progress[data-progress="92"] .pace-progress-inner:after { -webkit-transform: rotate(466deg); -ms-transform: rotate(466deg); transform: rotate(466deg); display: block; }
.pace-progress[data-progress="93"] .pace-progress-inner:after { -webkit-transform: rotate(470deg); -ms-transform: rotate(470deg); transform: rotate(470deg); display: block; }
.pace-progress[data-progress="94"] .pace-progress-inner:after { -webkit-transform: rotate(473deg); -ms-transform: rotate(473deg); transform: rotate(473deg); display: block; }
.pace-progress[data-progress="95"] .pace-progress-inner:after { -webkit-transform: rotate(477deg); -ms-transform: rotate(477deg); transform: rotate(477deg); display: block; }
.pace-progress[data-progress="96"] .pace-progress-inner:after { -webkit-transform: rotate(481deg); -ms-transform: rotate(481deg); transform: rotate(481deg); display: block; }
.pace-progress[data-progress="97"] .pace-progress-inner:after { -webkit-transform: rotate(484deg); -ms-transform: rotate(484deg); transform: rotate(484deg); display: block; }
.pace-progress[data-progress="98"] .pace-progress-inner:after { -webkit-transform: rotate(488deg); -ms-transform: rotate(488deg); transform: rotate(488deg); display: block; }
.pace-progress[data-progress="99"] .pace-progress-inner:after { -webkit-transform: rotate(491deg); -ms-transform: rotate(491deg); transform: rotate(491deg); display: block; }
.pace-progress[data-progress="100"] .pace-progress-inner:after { -webkit-transform: rotate(495deg); -ms-transform: rotate(495deg); transform: rotate(495deg); display: block; }
.pace-progress[data-progress="00"] .pace-progress-inner { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg);}
.pace-progress[data-progress="01"] .pace-progress-inner { -webkit-transform: rotate(4deg); -ms-transform: rotate(4deg); transform: rotate(4deg);}
.pace-progress[data-progress="02"] .pace-progress-inner { -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg);}
.pace-progress[data-progress="03"] .pace-progress-inner { -webkit-transform: rotate(11deg); -ms-transform: rotate(11deg); transform: rotate(11deg);}
.pace-progress[data-progress="04"] .pace-progress-inner { -webkit-transform: rotate(14deg); -ms-transform: rotate(14deg); transform: rotate(14deg);}
.pace-progress[data-progress="05"] .pace-progress-inner { -webkit-transform: rotate(18deg); -ms-transform: rotate(18deg); transform: rotate(18deg);}
.pace-progress[data-progress="06"] .pace-progress-inner { -webkit-transform: rotate(22deg); -ms-transform: rotate(22deg); transform: rotate(22deg);}
.pace-progress[data-progress="07"] .pace-progress-inner { -webkit-transform: rotate(25deg); -ms-transform: rotate(25deg); transform: rotate(25deg);}
.pace-progress[data-progress="08"] .pace-progress-inner { -webkit-transform: rotate(29deg); -ms-transform: rotate(29deg); transform: rotate(29deg);}
.pace-progress[data-progress="09"] .pace-progress-inner { -webkit-transform: rotate(32deg); -ms-transform: rotate(32deg); transform: rotate(32deg);}
.pace-progress[data-progress="10"] .pace-progress-inner { -webkit-transform: rotate(36deg); -ms-transform: rotate(36deg); transform: rotate(36deg);}
.pace-progress[data-progress="11"] .pace-progress-inner { -webkit-transform: rotate(40deg); -ms-transform: rotate(40deg); transform: rotate(40deg);}
.pace-progress[data-progress="12"] .pace-progress-inner { -webkit-transform: rotate(43deg); -ms-transform: rotate(43deg); transform: rotate(43deg);}
.pace-progress[data-progress="13"] .pace-progress-inner { -webkit-transform: rotate(47deg); -ms-transform: rotate(47deg); transform: rotate(47deg);}
.pace-progress[data-progress="14"] .pace-progress-inner { -webkit-transform: rotate(50deg); -ms-transform: rotate(50deg); transform: rotate(50deg);}
.pace-progress[data-progress="15"] .pace-progress-inner { -webkit-transform: rotate(54deg); -ms-transform: rotate(54deg); transform: rotate(54deg);}
.pace-progress[data-progress="16"] .pace-progress-inner { -webkit-transform: rotate(58deg); -ms-transform: rotate(58deg); transform: rotate(58deg);}
.pace-progress[data-progress="17"] .pace-progress-inner { -webkit-transform: rotate(61deg); -ms-transform: rotate(61deg); transform: rotate(61deg);}
.pace-progress[data-progress="18"] .pace-progress-inner { -webkit-transform: rotate(65deg); -ms-transform: rotate(65deg); transform: rotate(65deg);}
.pace-progress[data-progress="19"] .pace-progress-inner { -webkit-transform: rotate(68deg); -ms-transform: rotate(68deg); transform: rotate(68deg);}
.pace-progress[data-progress="20"] .pace-progress-inner { -webkit-transform: rotate(72deg); -ms-transform: rotate(72deg); transform: rotate(72deg);}
.pace-progress[data-progress="21"] .pace-progress-inner { -webkit-transform: rotate(76deg); -ms-transform: rotate(76deg); transform: rotate(76deg);}
.pace-progress[data-progress="22"] .pace-progress-inner { -webkit-transform: rotate(79deg); -ms-transform: rotate(79deg); transform: rotate(79deg);}
.pace-progress[data-progress="23"] .pace-progress-inner { -webkit-transform: rotate(83deg); -ms-transform: rotate(83deg); transform: rotate(83deg);}
.pace-progress[data-progress="24"] .pace-progress-inner { -webkit-transform: rotate(86deg); -ms-transform: rotate(86deg); transform: rotate(86deg);}
.pace-progress[data-progress="25"] .pace-progress-inner { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg);}
.pace-progress[data-progress="26"] .pace-progress-inner { -webkit-transform: rotate(94deg); -ms-transform: rotate(94deg); transform: rotate(94deg);}
.pace-progress[data-progress="27"] .pace-progress-inner { -webkit-transform: rotate(97deg); -ms-transform: rotate(97deg); transform: rotate(97deg);}
.pace-progress[data-progress="28"] .pace-progress-inner { -webkit-transform: rotate(101deg); -ms-transform: rotate(101deg); transform: rotate(101deg);}
.pace-progress[data-progress="29"] .pace-progress-inner { -webkit-transform: rotate(104deg); -ms-transform: rotate(104deg); transform: rotate(104deg);}
.pace-progress[data-progress="30"] .pace-progress-inner { -webkit-transform: rotate(108deg); -ms-transform: rotate(108deg); transform: rotate(108deg);}
.pace-progress[data-progress="31"] .pace-progress-inner { -webkit-transform: rotate(112deg); -ms-transform: rotate(112deg); transform: rotate(112deg);}
.pace-progress[data-progress="32"] .pace-progress-inner { -webkit-transform: rotate(115deg); -ms-transform: rotate(115deg); transform: rotate(115deg);}
.pace-progress[data-progress="33"] .pace-progress-inner { -webkit-transform: rotate(119deg); -ms-transform: rotate(119deg); transform: rotate(119deg);}
.pace-progress[data-progress="34"] .pace-progress-inner { -webkit-transform: rotate(122deg); -ms-transform: rotate(122deg); transform: rotate(122deg);}
.pace-progress[data-progress="35"] .pace-progress-inner { -webkit-transform: rotate(126deg); -ms-transform: rotate(126deg); transform: rotate(126deg);}
.pace-progress[data-progress="36"] .pace-progress-inner { -webkit-transform: rotate(130deg); -ms-transform: rotate(130deg); transform: rotate(130deg);}
.pace-progress[data-progress="37"] .pace-progress-inner { -webkit-transform: rotate(133deg); -ms-transform: rotate(133deg); transform: rotate(133deg);}
.pace-progress[data-progress="38"] .pace-progress-inner { -webkit-transform: rotate(137deg); -ms-transform: rotate(137deg); transform: rotate(137deg);}
.pace-progress[data-progress="39"] .pace-progress-inner { -webkit-transform: rotate(140deg); -ms-transform: rotate(140deg); transform: rotate(140deg);}
.pace-progress[data-progress="40"] .pace-progress-inner { -webkit-transform: rotate(144deg); -ms-transform: rotate(144deg); transform: rotate(144deg);}
.pace-progress[data-progress="41"] .pace-progress-inner { -webkit-transform: rotate(148deg); -ms-transform: rotate(148deg); transform: rotate(148deg);}
.pace-progress[data-progress="42"] .pace-progress-inner { -webkit-transform: rotate(151deg); -ms-transform: rotate(151deg); transform: rotate(151deg);}
.pace-progress[data-progress="43"] .pace-progress-inner { -webkit-transform: rotate(155deg); -ms-transform: rotate(155deg); transform: rotate(155deg);}
.pace-progress[data-progress="44"] .pace-progress-inner { -webkit-transform: rotate(158deg); -ms-transform: rotate(158deg); transform: rotate(158deg);}
.pace-progress[data-progress="45"] .pace-progress-inner { -webkit-transform: rotate(162deg); -ms-transform: rotate(162deg); transform: rotate(162deg);}
.pace-progress[data-progress="46"] .pace-progress-inner { -webkit-transform: rotate(166deg); -ms-transform: rotate(166deg); transform: rotate(166deg);}
.pace-progress[data-progress="47"] .pace-progress-inner { -webkit-transform: rotate(169deg); -ms-transform: rotate(169deg); transform: rotate(169deg);}
.pace-progress[data-progress="48"] .pace-progress-inner { -webkit-transform: rotate(173deg); -ms-transform: rotate(173deg); transform: rotate(173deg);}
.pace-progress[data-progress="49"] .pace-progress-inner { -webkit-transform: rotate(176deg); -ms-transform: rotate(176deg); transform: rotate(176deg);}
.pace-progress[data-progress="50"] .pace-progress-inner { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg);}
.pace-progress[data-progress="51"] .pace-progress-inner { -webkit-transform: rotate(184deg); -ms-transform: rotate(184deg); transform: rotate(184deg); overflow: visible;}
.pace-progress[data-progress="52"] .pace-progress-inner { -webkit-transform: rotate(187deg); -ms-transform: rotate(187deg); transform: rotate(187deg); overflow: visible;}
.pace-progress[data-progress="53"] .pace-progress-inner { -webkit-transform: rotate(191deg); -ms-transform: rotate(191deg); transform: rotate(191deg); overflow: visible;}
.pace-progress[data-progress="54"] .pace-progress-inner { -webkit-transform: rotate(194deg); -ms-transform: rotate(194deg); transform: rotate(194deg); overflow: visible;}
.pace-progress[data-progress="55"] .pace-progress-inner { -webkit-transform: rotate(198deg); -ms-transform: rotate(198deg); transform: rotate(198deg); overflow: visible;}
.pace-progress[data-progress="56"] .pace-progress-inner { -webkit-transform: rotate(202deg); -ms-transform: rotate(202deg); transform: rotate(202deg); overflow: visible;}
.pace-progress[data-progress="57"] .pace-progress-inner { -webkit-transform: rotate(205deg); -ms-transform: rotate(205deg); transform: rotate(205deg); overflow: visible;}
.pace-progress[data-progress="58"] .pace-progress-inner { -webkit-transform: rotate(209deg); -ms-transform: rotate(209deg); transform: rotate(209deg); overflow: visible;}
.pace-progress[data-progress="59"] .pace-progress-inner { -webkit-transform: rotate(212deg); -ms-transform: rotate(212deg); transform: rotate(212deg); overflow: visible;}
.pace-progress[data-progress="60"] .pace-progress-inner { -webkit-transform: rotate(216deg); -ms-transform: rotate(216deg); transform: rotate(216deg); overflow: visible;}
.pace-progress[data-progress="61"] .pace-progress-inner { -webkit-transform: rotate(220deg); -ms-transform: rotate(220deg); transform: rotate(220deg); overflow: visible;}
.pace-progress[data-progress="62"] .pace-progress-inner { -webkit-transform: rotate(223deg); -ms-transform: rotate(223deg); transform: rotate(223deg); overflow: visible;}
.pace-progress[data-progress="63"] .pace-progress-inner { -webkit-transform: rotate(227deg); -ms-transform: rotate(227deg); transform: rotate(227deg); overflow: visible;}
.pace-progress[data-progress="64"] .pace-progress-inner { -webkit-transform: rotate(230deg); -ms-transform: rotate(230deg); transform: rotate(230deg); overflow: visible;}
.pace-progress[data-progress="65"] .pace-progress-inner { -webkit-transform: rotate(234deg); -ms-transform: rotate(234deg); transform: rotate(234deg); overflow: visible;}
.pace-progress[data-progress="66"] .pace-progress-inner { -webkit-transform: rotate(238deg); -ms-transform: rotate(238deg); transform: rotate(238deg); overflow: visible;}
.pace-progress[data-progress="67"] .pace-progress-inner { -webkit-transform: rotate(241deg); -ms-transform: rotate(241deg); transform: rotate(241deg); overflow: visible;}
.pace-progress[data-progress="68"] .pace-progress-inner { -webkit-transform: rotate(245deg); -ms-transform: rotate(245deg); transform: rotate(245deg); overflow: visible;}
.pace-progress[data-progress="69"] .pace-progress-inner { -webkit-transform: rotate(248deg); -ms-transform: rotate(248deg); transform: rotate(248deg); overflow: visible;}
.pace-progress[data-progress="70"] .pace-progress-inner { -webkit-transform: rotate(252deg); -ms-transform: rotate(252deg); transform: rotate(252deg); overflow: visible;}
.pace-progress[data-progress="71"] .pace-progress-inner { -webkit-transform: rotate(256deg); -ms-transform: rotate(256deg); transform: rotate(256deg); overflow: visible;}
.pace-progress[data-progress="72"] .pace-progress-inner { -webkit-transform: rotate(259deg); -ms-transform: rotate(259deg); transform: rotate(259deg); overflow: visible;}
.pace-progress[data-progress="73"] .pace-progress-inner { -webkit-transform: rotate(263deg); -ms-transform: rotate(263deg); transform: rotate(263deg); overflow: visible;}
.pace-progress[data-progress="74"] .pace-progress-inner { -webkit-transform: rotate(266deg); -ms-transform: rotate(266deg); transform: rotate(266deg); overflow: visible;}
.pace-progress[data-progress="75"] .pace-progress-inner { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); overflow: visible;}
.pace-progress[data-progress="76"] .pace-progress-inner { -webkit-transform: rotate(274deg); -ms-transform: rotate(274deg); transform: rotate(274deg); overflow: visible;}
.pace-progress[data-progress="77"] .pace-progress-inner { -webkit-transform: rotate(277deg); -ms-transform: rotate(277deg); transform: rotate(277deg); overflow: visible;}
.pace-progress[data-progress="78"] .pace-progress-inner { -webkit-transform: rotate(281deg); -ms-transform: rotate(281deg); transform: rotate(281deg); overflow: visible;}
.pace-progress[data-progress="79"] .pace-progress-inner { -webkit-transform: rotate(284deg); -ms-transform: rotate(284deg); transform: rotate(284deg); overflow: visible;}
.pace-progress[data-progress="80"] .pace-progress-inner { -webkit-transform: rotate(288deg); -ms-transform: rotate(288deg); transform: rotate(288deg); overflow: visible;}
.pace-progress[data-progress="81"] .pace-progress-inner { -webkit-transform: rotate(292deg); -ms-transform: rotate(292deg); transform: rotate(292deg); overflow: visible;}
.pace-progress[data-progress="82"] .pace-progress-inner { -webkit-transform: rotate(295deg); -ms-transform: rotate(295deg); transform: rotate(295deg); overflow: visible;}
.pace-progress[data-progress="83"] .pace-progress-inner { -webkit-transform: rotate(299deg); -ms-transform: rotate(299deg); transform: rotate(299deg); overflow: visible;}
.pace-progress[data-progress="84"] .pace-progress-inner { -webkit-transform: rotate(302deg); -ms-transform: rotate(302deg); transform: rotate(302deg); overflow: visible;}
.pace-progress[data-progress="85"] .pace-progress-inner { -webkit-transform: rotate(306deg); -ms-transform: rotate(306deg); transform: rotate(306deg); overflow: visible;}
.pace-progress[data-progress="86"] .pace-progress-inner { -webkit-transform: rotate(310deg); -ms-transform: rotate(310deg); transform: rotate(310deg); overflow: visible;}
.pace-progress[data-progress="87"] .pace-progress-inner { -webkit-transform: rotate(313deg); -ms-transform: rotate(313deg); transform: rotate(313deg); overflow: visible;}
.pace-progress[data-progress="88"] .pace-progress-inner { -webkit-transform: rotate(317deg); -ms-transform: rotate(317deg); transform: rotate(317deg); overflow: visible;}
.pace-progress[data-progress="89"] .pace-progress-inner { -webkit-transform: rotate(320deg); -ms-transform: rotate(320deg); transform: rotate(320deg); overflow: visible;}
.pace-progress[data-progress="90"] .pace-progress-inner { -webkit-transform: rotate(324deg); -ms-transform: rotate(324deg); transform: rotate(324deg); overflow: visible;}
.pace-progress[data-progress="91"] .pace-progress-inner { -webkit-transform: rotate(328deg); -ms-transform: rotate(328deg); transform: rotate(328deg); overflow: visible;}
.pace-progress[data-progress="92"] .pace-progress-inner { -webkit-transform: rotate(331deg); -ms-transform: rotate(331deg); transform: rotate(331deg); overflow: visible;}
.pace-progress[data-progress="93"] .pace-progress-inner { -webkit-transform: rotate(335deg); -ms-transform: rotate(335deg); transform: rotate(335deg); overflow: visible;}
.pace-progress[data-progress="94"] .pace-progress-inner { -webkit-transform: rotate(338deg); -ms-transform: rotate(338deg); transform: rotate(338deg); overflow: visible;}
.pace-progress[data-progress="95"] .pace-progress-inner { -webkit-transform: rotate(342deg); -ms-transform: rotate(342deg); transform: rotate(342deg); overflow: visible;}
.pace-progress[data-progress="96"] .pace-progress-inner { -webkit-transform: rotate(346deg); -ms-transform: rotate(346deg); transform: rotate(346deg); overflow: visible;}
.pace-progress[data-progress="97"] .pace-progress-inner { -webkit-transform: rotate(349deg); -ms-transform: rotate(349deg); transform: rotate(349deg); overflow: visible;}
.pace-progress[data-progress="98"] .pace-progress-inner { -webkit-transform: rotate(353deg); -ms-transform: rotate(353deg); transform: rotate(353deg); overflow: visible;}
.pace-progress[data-progress="99"] .pace-progress-inner { -webkit-transform: rotate(356deg); -ms-transform: rotate(356deg); transform: rotate(356deg); overflow: visible;}
.pace-progress[data-progress="100"] .pace-progress-inner { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); overflow: visible;}
================================================
FILE: themes/black/pace-theme-minimal.css
================================================
/* This is a compiled file, you should be editing the file in the templates directory */
.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: #000000;
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 2px;
}
================================================
FILE: themes/blue/pace-theme-barber-shop.css
================================================
/* This is a compiled file, you should be editing the file in the templates directory */
.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: #2299dd;
position: fixed;
top: 0;
bottom: 0;
right: 100%;
width: 100%;
overflow: hidden;
height: 12px;
}
.pace .pace-activity {
position: fixed;
top: 0;
right: -32px;
bottom: 0;
left: 0;
height: 12px;
-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); }
}
================================================
FILE: themes/blue/pace-theme-big-counter.css
================================================
/* This is a compiled file, you should be editing the file in the templates directory */
.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(34, 153, 221, 0.19999999999999996);
}
================================================
FILE: themes/blue/pace-theme-bounce.css
================================================
/* This is a compiled file, you should be editing the file in the templates directory */
.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: #2299dd;
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;
}
}
================================================
FILE: themes/blue/pace-theme-center-atom.css
================================================
/* This is a compiled file, you should be editing the file in the templates directory */
.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: #2299dd;
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 #2299dd;
content: ' ';
display: block;
position: absolute;
top: 0;
left: 0;
height: 60px;
width: 100px;
}
.pace .pace-activity:after {
border-radius: 50%;
border: 5px solid #2299dd;
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 #2299dd;
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) }
}
================================================
FILE: themes/blue/pace-theme-center-circle.css
================================================
/* This is a compiled file, you should be editing the file in the templates directory */
.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) }
}
================================================
FILE: themes/blue/pace-theme-center-radar.css
================================================
/* This is a compiled file, you should be editing the file in the templates directory */
.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: #2299dd transparent transparent;
border-radius: 50%;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-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: #2299dd transparent transparent;
border-radius: 50%;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
@-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); }
}
================================================
FILE: themes/blue/pace-theme-center-simple.css
================================================
/* This is a compiled file, you should be editing the file in the templates directory */
.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 #2299dd;
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: #2299dd;
}
.pace.pace-inactive {
display: none;
}
================================================
FILE: themes/blue/pace-theme-corner-indicator.css
================================================
/* This is a compiled file, you should be editing the file in the templates directory */
.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: #2299dd;
-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); }
}
================================================
FILE: themes/blue/pace-theme-fill-left.css
================================================
/* This is a compiled file, you should be editing the file in the templates directory */
.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(34, 153, 221, 0.19999999999999996);
position: fixed;
z-index: -1;
top: 0;
right: 100%;
bottom: 0;
width: 100%;
}
================================================
FILE: themes/blue/pace-theme-flash.css
================================================
/* This is a compiled file, you should be editing the file in the templates directory */
.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: #2299dd;
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 #2299dd, 0 0 5px #2299dd;
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: #2299dd;
border-left-color: #2299dd;
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); }
}
================================================
FILE: themes/blue/pace-theme-flat-top.css
================================================
/* This is a compiled file, you should be editing the file in the templates directory */
.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: transform .5s ease-out;
-ms-transition: 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: #2299dd;
pointer-events: none;
}
================================================
FILE: themes/blue/pace-theme-loading-bar.css
================================================
/* This is a compiled file, you should be editing the file in the templates directory */
.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: #2299dd;
color: #2299dd;
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[da
gitextract_rpx0a4w0/
├── .gitignore
├── LICENSE
├── README.md
├── pace-theme-default.css
├── pace.js
├── package.json
├── templates/
│ ├── pace-theme-barber-shop.tmpl.css
│ ├── pace-theme-big-counter.tmpl.css
│ ├── pace-theme-bounce.tmpl.css
│ ├── pace-theme-center-atom.tmpl.css
│ ├── pace-theme-center-circle.tmpl.css
│ ├── pace-theme-center-radar.tmpl.css
│ ├── pace-theme-center-simple.tmpl.css
│ ├── pace-theme-corner-indicator.tmpl.css
│ ├── pace-theme-fill-left.tmpl.css
│ ├── pace-theme-flash.tmpl.css
│ ├── pace-theme-flat-top.tmpl.css
│ ├── pace-theme-loading-bar.tmpl.css
│ ├── pace-theme-mac-osx.tmpl.css
│ ├── pace-theme-material.tmpl.css
│ └── pace-theme-minimal.tmpl.css
└── themes/
├── black/
│ ├── pace-theme-barber-shop.css
│ ├── pace-theme-big-counter.css
│ ├── pace-theme-bounce.css
│ ├── pace-theme-center-atom.css
│ ├── pace-theme-center-circle.css
│ ├── pace-theme-center-radar.css
│ ├── pace-theme-center-simple.css
│ ├── pace-theme-corner-indicator.css
│ ├── pace-theme-fill-left.css
│ ├── pace-theme-flash.css
│ ├── pace-theme-flat-top.css
│ ├── pace-theme-loading-bar.css
│ ├── pace-theme-mac-osx.css
│ ├── pace-theme-material.css
│ └── pace-theme-minimal.css
├── blue/
│ ├── pace-theme-barber-shop.css
│ ├── pace-theme-big-counter.css
│ ├── pace-theme-bounce.css
│ ├── pace-theme-center-atom.css
│ ├── pace-theme-center-circle.css
│ ├── pace-theme-center-radar.css
│ ├── pace-theme-center-simple.css
│ ├── pace-theme-corner-indicator.css
│ ├── pace-theme-fill-left.css
│ ├── pace-theme-flash.css
│ ├── pace-theme-flat-top.css
│ ├── pace-theme-loading-bar.css
│ ├── pace-theme-mac-osx.css
│ ├── pace-theme-material.css
│ └── pace-theme-minimal.css
├── green/
│ ├── pace-theme-barber-shop.css
│ ├── pace-theme-big-counter.css
│ ├── pace-theme-bounce.css
│ ├── pace-theme-center-atom.css
│ ├── pace-theme-center-circle.css
│ ├── pace-theme-center-radar.css
│ ├── pace-theme-center-simple.css
│ ├── pace-theme-corner-indicator.css
│ ├── pace-theme-fill-left.css
│ ├── pace-theme-flash.css
│ ├── pace-theme-flat-top.css
│ ├── pace-theme-loading-bar.css
│ ├── pace-theme-mac-osx.css
│ ├── pace-theme-material.css
│ └── pace-theme-minimal.css
├── orange/
│ ├── pace-theme-barber-shop.css
│ ├── pace-theme-big-counter.css
│ ├── pace-theme-bounce.css
│ ├── pace-theme-center-atom.css
│ ├── pace-theme-center-circle.css
│ ├── pace-theme-center-radar.css
│ ├── pace-theme-center-simple.css
│ ├── pace-theme-corner-indicator.css
│ ├── pace-theme-fill-left.css
│ ├── pace-theme-flash.css
│ ├── pace-theme-flat-top.css
│ ├── pace-theme-loading-bar.css
│ ├── pace-theme-mac-osx.css
│ ├── pace-theme-material.css
│ └── pace-theme-minimal.css
├── pink/
│ ├── pace-theme-barber-shop.css
│ ├── pace-theme-big-counter.css
│ ├── pace-theme-bounce.css
│ ├── pace-theme-center-atom.css
│ ├── pace-theme-center-circle.css
│ ├── pace-theme-center-radar.css
│ ├── pace-theme-center-simple.css
│ ├── pace-theme-corner-indicator.css
│ ├── pace-theme-fill-left.css
│ ├── pace-theme-flash.css
│ ├── pace-theme-flat-top.css
│ ├── pace-theme-loading-bar.css
│ ├── pace-theme-mac-osx.css
│ ├── pace-theme-material.css
│ └── pace-theme-minimal.css
├── purple/
│ ├── pace-theme-barber-shop.css
│ ├── pace-theme-big-counter.css
│ ├── pace-theme-bounce.css
│ ├── pace-theme-center-atom.css
│ ├── pace-theme-center-circle.css
│ ├── pace-theme-center-radar.css
│ ├── pace-theme-center-simple.css
│ ├── pace-theme-corner-indicator.css
│ ├── pace-theme-fill-left.css
│ ├── pace-theme-flash.css
│ ├── pace-theme-flat-top.css
│ ├── pace-theme-loading-bar.css
│ ├── pace-theme-mac-osx.css
│ ├── pace-theme-material.css
│ └── pace-theme-minimal.css
├── red/
│ ├── pace-theme-barber-shop.css
│ ├── pace-theme-big-counter.css
│ ├── pace-theme-bounce.css
│ ├── pace-theme-center-atom.css
│ ├── pace-theme-center-circle.css
│ ├── pace-theme-center-radar.css
│ ├── pace-theme-center-simple.css
│ ├── pace-theme-corner-indicator.css
│ ├── pace-theme-fill-left.css
│ ├── pace-theme-flash.css
│ ├── pace-theme-flat-top.css
│ ├── pace-theme-loading-bar.css
│ ├── pace-theme-mac-osx.css
│ ├── pace-theme-material.css
│ └── pace-theme-minimal.css
├── silver/
│ ├── pace-theme-barber-shop.css
│ ├── pace-theme-big-counter.css
│ ├── pace-theme-bounce.css
│ ├── pace-theme-center-atom.css
│ ├── pace-theme-center-circle.css
│ ├── pace-theme-center-radar.css
│ ├── pace-theme-center-simple.css
│ ├── pace-theme-corner-indicator.css
│ ├── pace-theme-fill-left.css
│ ├── pace-theme-flash.css
│ ├── pace-theme-flat-top.css
│ ├── pace-theme-loading-bar.css
│ ├── pace-theme-mac-osx.css
│ ├── pace-theme-material.css
│ └── pace-theme-minimal.css
├── white/
│ ├── pace-theme-barber-shop.css
│ ├── pace-theme-big-counter.css
│ ├── pace-theme-bounce.css
│ ├── pace-theme-center-atom.css
│ ├── pace-theme-center-circle.css
│ ├── pace-theme-center-radar.css
│ ├── pace-theme-center-simple.css
│ ├── pace-theme-corner-indicator.css
│ ├── pace-theme-fill-left.css
│ ├── pace-theme-flash.css
│ ├── pace-theme-flat-top.css
│ ├── pace-theme-loading-bar.css
│ ├── pace-theme-mac-osx.css
│ ├── pace-theme-material.css
│ └── pace-theme-minimal.css
└── yellow/
├── pace-theme-barber-shop.css
├── pace-theme-big-counter.css
├── pace-theme-bounce.css
├── pace-theme-center-atom.css
├── pace-theme-center-circle.css
├── pace-theme-center-radar.css
├── pace-theme-center-simple.css
├── pace-theme-corner-indicator.css
├── pace-theme-fill-left.css
├── pace-theme-flash.css
├── pace-theme-flat-top.css
├── pace-theme-loading-bar.css
├── pace-theme-mac-osx.css
├── pace-theme-material.css
└── pace-theme-minimal.css
SYMBOL INDEX (14 symbols across 1 files)
FILE: pace.js
function ctor (line 10) | function ctor() { this.constructor = child; }
function Evented (line 166) | function Evented() {}
function NoTargetError (line 253) | function NoTargetError() {
function Bar (line 263) | function Bar() {
function Events (line 345) | function Events() {
function RequestIntercept (line 450) | function RequestIntercept() {
function AjaxMonitor (line 582) | function AjaxMonitor() {
function XHRRequestTracker (line 616) | function XHRRequestTracker(request, completeCallback) {
function SocketRequestTracker (line 657) | function SocketRequestTracker(request, completeCallback) {
function ElementMonitor (line 676) | function ElementMonitor(options) {
function ElementTracker (line 704) | function ElementTracker(selector, completeCallback) {
function DocumentMonitor (line 739) | function DocumentMonitor() {
function EventLagMonitor (line 757) | function EventLagMonitor() {
function Scaler (line 788) | function Scaler(source) {
Condensed preview — 171 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (844K chars).
[
{
"path": ".gitignore",
"chars": 0,
"preview": ""
},
{
"path": "LICENSE",
"chars": 1057,
"preview": "Copyright (c) 2013 HubSpot, Inc.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this s"
},
{
"path": "README.md",
"chars": 8338,
"preview": "PACE\n====\n[](https://github.com/Co"
},
{
"path": "pace-theme-default.css",
"chars": 418,
"preview": "/*!\n * pace.js v1.2.4 | Default theme\n * https://github.com/CodeByZach/pace/\n * Licensed MIT © HubSpot, Inc.\n */\n.pace {"
},
{
"path": "pace.js",
"chars": 25867,
"preview": "/*!\n * pace.js v1.2.4\n * https://github.com/CodeByZach/pace/\n * Licensed MIT © HubSpot, Inc.\n */\n(function() {\n\tvar Ajax"
},
{
"path": "package.json",
"chars": 661,
"preview": "{\n \"name\": \"pace-js\",\n \"version\": \"1.2.4\",\n \"description\": \"Automatically add a progress bar to your site.\",\n \"main\""
},
{
"path": "templates/pace-theme-barber-shop.tmpl.css",
"chars": 3210,
"preview": ".pace {\n\t-webkit-pointer-events: none;\n\tpointer-events: none;\n\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\tuse"
},
{
"path": "templates/pace-theme-big-counter.tmpl.css",
"chars": 762,
"preview": ".pace {\n\t-webkit-pointer-events: none;\n\tpointer-events: none;\n\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\tuse"
},
{
"path": "templates/pace-theme-bounce.tmpl.css",
"chars": 4728,
"preview": ".pace {\n\twidth: 140px;\n\theight: 300px;\n\tposition: fixed;\n\ttop: -90px;\n\tright: -20px;\n\tz-index: 2000;\n\t-webkit-transform:"
},
{
"path": "templates/pace-theme-center-atom.tmpl.css",
"chars": 2684,
"preview": ".pace.pace-inactive {\n\tdisplay: none;\n}\n\n.pace {\n\t-webkit-pointer-events: none;\n\tpointer-events: none;\n\n\t-webkit-user-se"
},
{
"path": "templates/pace-theme-center-circle.tmpl.css",
"chars": 2055,
"preview": ".pace {\n\t-webkit-pointer-events: none;\n\tpointer-events: none;\n\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\tuse"
},
{
"path": "templates/pace-theme-center-radar.tmpl.css",
"chars": 1496,
"preview": ".pace {\n\t-webkit-pointer-events: none;\n\tpointer-events: none;\n\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\tuse"
},
{
"path": "templates/pace-theme-center-simple.tmpl.css",
"chars": 924,
"preview": ".pace {\n\t-webkit-pointer-events: none;\n\tpointer-events: none;\n\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\tuse"
},
{
"path": "templates/pace-theme-corner-indicator.tmpl.css",
"chars": 1817,
"preview": ".pace {\n\t-webkit-pointer-events: none;\n\tpointer-events: none;\n\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\tuse"
},
{
"path": "templates/pace-theme-fill-left.tmpl.css",
"chars": 368,
"preview": ".pace {\n\t-webkit-pointer-events: none;\n\tpointer-events: none;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\tuser"
},
{
"path": "templates/pace-theme-flash.tmpl.css",
"chars": 2125,
"preview": ".pace {\n\t-webkit-pointer-events: none;\n\tpointer-events: none;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\tuser"
},
{
"path": "templates/pace-theme-flat-top.tmpl.css",
"chars": 767,
"preview": ".pace {\n\t-webkit-pointer-events: none;\n\tpointer-events: none;\n\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\tuse"
},
{
"path": "templates/pace-theme-loading-bar.tmpl.css",
"chars": 2085,
"preview": ".pace {\n\t-webkit-pointer-events: none;\n\tpointer-events: none;\n\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\tuse"
},
{
"path": "templates/pace-theme-mac-osx.tmpl.css",
"chars": 3435,
"preview": ".pace {\n\t-webkit-pointer-events: none;\n\tpointer-events: none;\n\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\tuse"
},
{
"path": "templates/pace-theme-material.tmpl.css",
"chars": 35097,
"preview": ".pace {\n\t-webkit-pointer-events: none;\n\tpointer-events: none;\n\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms"
},
{
"path": "templates/pace-theme-minimal.tmpl.css",
"chars": 321,
"preview": ".pace {\n\t-webkit-pointer-events: none;\n\tpointer-events: none;\n\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\tuse"
},
{
"path": "themes/black/pace-theme-barber-shop.css",
"chars": 3342,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/black/pace-theme-big-counter.css",
"chars": 858,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/black/pace-theme-bounce.css",
"chars": 5101,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n width: 140px;\n heigh"
},
{
"path": "themes/black/pace-theme-center-atom.css",
"chars": 2806,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace.pace-inactive {\n display"
},
{
"path": "themes/black/pace-theme-center-circle.css",
"chars": 2167,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/black/pace-theme-center-radar.css",
"chars": 1609,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/black/pace-theme-center-simple.css",
"chars": 1021,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/black/pace-theme-corner-indicator.css",
"chars": 1988,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/black/pace-theme-fill-left.css",
"chars": 437,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/black/pace-theme-flash.css",
"chars": 2191,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/black/pace-theme-flat-top.css",
"chars": 869,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/black/pace-theme-loading-bar.css",
"chars": 9477,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/black/pace-theme-mac-osx.css",
"chars": 3050,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/black/pace-theme-material.css",
"chars": 35286,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/black/pace-theme-minimal.css",
"chars": 409,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/blue/pace-theme-barber-shop.css",
"chars": 3342,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/blue/pace-theme-big-counter.css",
"chars": 863,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/blue/pace-theme-bounce.css",
"chars": 5101,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n width: 140px;\n heigh"
},
{
"path": "themes/blue/pace-theme-center-atom.css",
"chars": 2806,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace.pace-inactive {\n display"
},
{
"path": "themes/blue/pace-theme-center-circle.css",
"chars": 2172,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/blue/pace-theme-center-radar.css",
"chars": 1609,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/blue/pace-theme-center-simple.css",
"chars": 1021,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/blue/pace-theme-corner-indicator.css",
"chars": 1988,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/blue/pace-theme-fill-left.css",
"chars": 442,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/blue/pace-theme-flash.css",
"chars": 2191,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/blue/pace-theme-flat-top.css",
"chars": 869,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/blue/pace-theme-loading-bar.css",
"chars": 9477,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/blue/pace-theme-mac-osx.css",
"chars": 3050,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/blue/pace-theme-material.css",
"chars": 35286,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/blue/pace-theme-minimal.css",
"chars": 409,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/green/pace-theme-barber-shop.css",
"chars": 3342,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/green/pace-theme-big-counter.css",
"chars": 863,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/green/pace-theme-bounce.css",
"chars": 5101,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n width: 140px;\n heigh"
},
{
"path": "themes/green/pace-theme-center-atom.css",
"chars": 2806,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace.pace-inactive {\n display"
},
{
"path": "themes/green/pace-theme-center-circle.css",
"chars": 2172,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/green/pace-theme-center-radar.css",
"chars": 1609,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/green/pace-theme-center-simple.css",
"chars": 1021,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/green/pace-theme-corner-indicator.css",
"chars": 1988,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/green/pace-theme-fill-left.css",
"chars": 442,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/green/pace-theme-flash.css",
"chars": 2191,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/green/pace-theme-flat-top.css",
"chars": 869,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/green/pace-theme-loading-bar.css",
"chars": 9477,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/green/pace-theme-mac-osx.css",
"chars": 3050,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/green/pace-theme-material.css",
"chars": 35286,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/green/pace-theme-minimal.css",
"chars": 409,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/orange/pace-theme-barber-shop.css",
"chars": 3342,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/orange/pace-theme-big-counter.css",
"chars": 863,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/orange/pace-theme-bounce.css",
"chars": 5101,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n width: 140px;\n heigh"
},
{
"path": "themes/orange/pace-theme-center-atom.css",
"chars": 2806,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace.pace-inactive {\n display"
},
{
"path": "themes/orange/pace-theme-center-circle.css",
"chars": 2172,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/orange/pace-theme-center-radar.css",
"chars": 1609,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/orange/pace-theme-center-simple.css",
"chars": 1021,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/orange/pace-theme-corner-indicator.css",
"chars": 1988,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/orange/pace-theme-fill-left.css",
"chars": 442,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/orange/pace-theme-flash.css",
"chars": 2191,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/orange/pace-theme-flat-top.css",
"chars": 869,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/orange/pace-theme-loading-bar.css",
"chars": 9477,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/orange/pace-theme-mac-osx.css",
"chars": 3050,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/orange/pace-theme-material.css",
"chars": 35286,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/orange/pace-theme-minimal.css",
"chars": 409,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/pink/pace-theme-barber-shop.css",
"chars": 3342,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/pink/pace-theme-big-counter.css",
"chars": 863,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/pink/pace-theme-bounce.css",
"chars": 5101,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n width: 140px;\n heigh"
},
{
"path": "themes/pink/pace-theme-center-atom.css",
"chars": 2806,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace.pace-inactive {\n display"
},
{
"path": "themes/pink/pace-theme-center-circle.css",
"chars": 2172,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/pink/pace-theme-center-radar.css",
"chars": 1609,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/pink/pace-theme-center-simple.css",
"chars": 1021,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/pink/pace-theme-corner-indicator.css",
"chars": 1988,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/pink/pace-theme-fill-left.css",
"chars": 442,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/pink/pace-theme-flash.css",
"chars": 2191,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/pink/pace-theme-flat-top.css",
"chars": 869,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/pink/pace-theme-loading-bar.css",
"chars": 9477,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/pink/pace-theme-mac-osx.css",
"chars": 3050,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/pink/pace-theme-material.css",
"chars": 35286,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/pink/pace-theme-minimal.css",
"chars": 409,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/purple/pace-theme-barber-shop.css",
"chars": 3342,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/purple/pace-theme-big-counter.css",
"chars": 863,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/purple/pace-theme-bounce.css",
"chars": 5101,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n width: 140px;\n heigh"
},
{
"path": "themes/purple/pace-theme-center-atom.css",
"chars": 2806,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace.pace-inactive {\n display"
},
{
"path": "themes/purple/pace-theme-center-circle.css",
"chars": 2172,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/purple/pace-theme-center-radar.css",
"chars": 1609,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/purple/pace-theme-center-simple.css",
"chars": 1021,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/purple/pace-theme-corner-indicator.css",
"chars": 1988,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/purple/pace-theme-fill-left.css",
"chars": 442,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/purple/pace-theme-flash.css",
"chars": 2191,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/purple/pace-theme-flat-top.css",
"chars": 869,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/purple/pace-theme-loading-bar.css",
"chars": 9477,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/purple/pace-theme-mac-osx.css",
"chars": 3050,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/purple/pace-theme-material.css",
"chars": 35286,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/purple/pace-theme-minimal.css",
"chars": 409,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/red/pace-theme-barber-shop.css",
"chars": 3342,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/red/pace-theme-big-counter.css",
"chars": 862,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/red/pace-theme-bounce.css",
"chars": 5101,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n width: 140px;\n heigh"
},
{
"path": "themes/red/pace-theme-center-atom.css",
"chars": 2806,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace.pace-inactive {\n display"
},
{
"path": "themes/red/pace-theme-center-circle.css",
"chars": 2171,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/red/pace-theme-center-radar.css",
"chars": 1609,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/red/pace-theme-center-simple.css",
"chars": 1021,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/red/pace-theme-corner-indicator.css",
"chars": 1988,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/red/pace-theme-fill-left.css",
"chars": 441,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/red/pace-theme-flash.css",
"chars": 2191,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/red/pace-theme-flat-top.css",
"chars": 869,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/red/pace-theme-loading-bar.css",
"chars": 9477,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/red/pace-theme-mac-osx.css",
"chars": 3050,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/red/pace-theme-material.css",
"chars": 35286,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/red/pace-theme-minimal.css",
"chars": 409,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/silver/pace-theme-barber-shop.css",
"chars": 3342,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/silver/pace-theme-big-counter.css",
"chars": 864,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/silver/pace-theme-bounce.css",
"chars": 5101,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n width: 140px;\n heigh"
},
{
"path": "themes/silver/pace-theme-center-atom.css",
"chars": 2806,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace.pace-inactive {\n display"
},
{
"path": "themes/silver/pace-theme-center-circle.css",
"chars": 2173,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/silver/pace-theme-center-radar.css",
"chars": 1609,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/silver/pace-theme-center-simple.css",
"chars": 1021,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/silver/pace-theme-corner-indicator.css",
"chars": 1988,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/silver/pace-theme-fill-left.css",
"chars": 443,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/silver/pace-theme-flash.css",
"chars": 2191,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/silver/pace-theme-flat-top.css",
"chars": 869,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/silver/pace-theme-loading-bar.css",
"chars": 9477,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/silver/pace-theme-mac-osx.css",
"chars": 3050,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/silver/pace-theme-material.css",
"chars": 35286,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/silver/pace-theme-minimal.css",
"chars": 409,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/white/pace-theme-barber-shop.css",
"chars": 3342,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/white/pace-theme-big-counter.css",
"chars": 864,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/white/pace-theme-bounce.css",
"chars": 5101,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n width: 140px;\n heigh"
},
{
"path": "themes/white/pace-theme-center-atom.css",
"chars": 2806,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace.pace-inactive {\n display"
},
{
"path": "themes/white/pace-theme-center-circle.css",
"chars": 2173,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/white/pace-theme-center-radar.css",
"chars": 1609,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/white/pace-theme-center-simple.css",
"chars": 1021,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/white/pace-theme-corner-indicator.css",
"chars": 1988,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/white/pace-theme-fill-left.css",
"chars": 443,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/white/pace-theme-flash.css",
"chars": 2191,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/white/pace-theme-flat-top.css",
"chars": 869,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/white/pace-theme-loading-bar.css",
"chars": 9477,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/white/pace-theme-mac-osx.css",
"chars": 3050,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/white/pace-theme-material.css",
"chars": 35286,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/white/pace-theme-minimal.css",
"chars": 409,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/yellow/pace-theme-barber-shop.css",
"chars": 3342,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/yellow/pace-theme-big-counter.css",
"chars": 863,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/yellow/pace-theme-bounce.css",
"chars": 5101,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n width: 140px;\n heigh"
},
{
"path": "themes/yellow/pace-theme-center-atom.css",
"chars": 2806,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace.pace-inactive {\n display"
},
{
"path": "themes/yellow/pace-theme-center-circle.css",
"chars": 2172,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/yellow/pace-theme-center-radar.css",
"chars": 1609,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/yellow/pace-theme-center-simple.css",
"chars": 1021,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/yellow/pace-theme-corner-indicator.css",
"chars": 1988,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/yellow/pace-theme-fill-left.css",
"chars": 442,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/yellow/pace-theme-flash.css",
"chars": 2191,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/yellow/pace-theme-flat-top.css",
"chars": 869,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/yellow/pace-theme-loading-bar.css",
"chars": 9477,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/yellow/pace-theme-mac-osx.css",
"chars": 3050,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/yellow/pace-theme-material.css",
"chars": 35286,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
},
{
"path": "themes/yellow/pace-theme-minimal.css",
"chars": 409,
"preview": "/* This is a compiled file, you should be editing the file in the templates directory */\n.pace {\n -webkit-pointer-event"
}
]
About this extraction
This page contains the full source code of the CodeByZach/pace GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 171 files (785.6 KB), approximately 238.9k tokens, and a symbol index with 14 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.