mirror of
https://github.com/stylersnico/librenms.git
synced 2026-07-31 16:23:50 +02:00
Merge commit 'c1ac5e4b549f4e6fa3671992c57e2080bf827e35' as 'lib/pace'
This commit is contained in:
JoubertRedRat
@@ -0,0 +1,291 @@
|
||||
pace
|
||||
====
|
||||
|
||||
Include [pace.js](https://raw.github.com/HubSpot/pace/v0.5.3/pace.min.js) and the
|
||||
[theme](http://github.hubspot.com/pace/docs/welcome/) css of your choice on your page
|
||||
(as early as is 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 in pace.js and call `pace.start()` as early in
|
||||
the loading process as is possible.
|
||||
|
||||
Install with Eager
|
||||
------------------
|
||||
|
||||
The easiest way to add Pace to your site is with [Eager](http://eager.io).
|
||||
Click Install to see a live preview of Pace on your website.
|
||||
|
||||
<iframe style="height: 48px; width: 180px" src="//install.eager.io?appId=kYKTiQjoVjQk" allowtransparency="true" scroll="no" frameBorder="0"></iframe>
|
||||
|
||||
Example
|
||||
-------
|
||||
|
||||
```html
|
||||
<head>
|
||||
<script src="/pace/pace.js"></script>
|
||||
<link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" />
|
||||
</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='pace.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](http://github.hubspot.com/pace/docs/welcome/)
|
||||
to get you started. Just include the appropriate css file. Send us a PR with
|
||||
any interesting themes you create.
|
||||
|
||||
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 existance 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 seperate the selectors to propertly 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/HubSpot/pace/blob/master/pace.coffee) for a full list of all 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`: Expliticly 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/HubSpot/pace/issues/new). If you can include a test case, that's even better.
|
||||
|
||||
Contributing
|
||||
------------
|
||||
|
||||
PRs Welcome!
|
||||
|
||||
Building requires node.js.
|
||||
|
||||
```bash
|
||||
npm install
|
||||
grunt
|
||||
```
|
||||
|
||||
You can also run `grunt watch` to have it automatically build as you make changes.
|
||||
|
||||
There is no need to include compiled files in PRs.
|
||||
|
||||
Credits
|
||||
-------
|
||||
|
||||
[HubSpot](http://dev.hubspot.com)
|
||||
|
||||
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 diff suppressed because one or more lines are too long
@@ -0,0 +1,27 @@
|
||||
if module?
|
||||
vm = require('vm')
|
||||
|
||||
# Used by the eval'd code
|
||||
Color = require('color')
|
||||
|
||||
loadTheme = (name, cb) ->
|
||||
$.ajax
|
||||
url: "/pace/templates/pace-theme-#{ name }.tmpl.css"
|
||||
success: cb
|
||||
|
||||
compileTheme = (body, args={}) ->
|
||||
body.replace /`([\s\S]*?)`/gm, (match, code) ->
|
||||
if module?
|
||||
val = vm.runInNewContext code, {args, Color}
|
||||
else
|
||||
# It matters that args is in the context
|
||||
Color = window.Color
|
||||
val = eval(code)
|
||||
|
||||
val
|
||||
|
||||
if module?
|
||||
module.exports = {compileTheme}
|
||||
else
|
||||
window.loadTheme = loadTheme
|
||||
window.compileTheme = compileTheme
|
||||
@@ -0,0 +1,44 @@
|
||||
(function() {
|
||||
var Color, compileTheme, loadTheme, vm;
|
||||
|
||||
if (typeof module !== "undefined" && module !== null) {
|
||||
vm = require('vm');
|
||||
Color = require('color');
|
||||
}
|
||||
|
||||
loadTheme = function(name, cb) {
|
||||
return $.ajax({
|
||||
url: "/pace/templates/pace-theme-" + name + ".tmpl.css",
|
||||
success: cb
|
||||
});
|
||||
};
|
||||
|
||||
compileTheme = function(body, args) {
|
||||
if (args == null) {
|
||||
args = {};
|
||||
}
|
||||
return body.replace(/`([\s\S]*?)`/gm, function(match, code) {
|
||||
var val;
|
||||
if (typeof module !== "undefined" && module !== null) {
|
||||
val = vm.runInNewContext(code, {
|
||||
args: args,
|
||||
Color: Color
|
||||
});
|
||||
} else {
|
||||
Color = window.Color;
|
||||
val = eval(code);
|
||||
}
|
||||
return val;
|
||||
});
|
||||
};
|
||||
|
||||
if (typeof module !== "undefined" && module !== null) {
|
||||
module.exports = {
|
||||
compileTheme: compileTheme
|
||||
};
|
||||
} else {
|
||||
window.loadTheme = loadTheme;
|
||||
window.compileTheme = compileTheme;
|
||||
}
|
||||
|
||||
}).call(this);
|
||||
@@ -0,0 +1,68 @@
|
||||
.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: #EE5C00;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 42px;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.pace .pace-progress-inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: -32px;
|
||||
bottom: 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-stripe-animation 500ms linear infinite;
|
||||
-moz-animation: pace-stripe-animation 500ms linear infinite;
|
||||
-ms-animation: pace-stripe-animation 500ms linear infinite;
|
||||
-o-animation: pace-stripe-animation 500ms linear infinite;
|
||||
animation: pace-stripe-animation 500ms linear infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes pace-stripe-animation {
|
||||
0% { -webkit-transform: none; transform: none; }
|
||||
100% { -webkit-transform: translate(-32px, 0); transform: translate(-32px, 0); }
|
||||
}
|
||||
@-moz-keyframes pace-stripe-animation {
|
||||
0% { -moz-transform: none; transform: none; }
|
||||
100% { -moz-transform: translate(-32px, 0); transform: translate(-32px, 0); }
|
||||
}
|
||||
@-o-keyframes pace-stripe-animation {
|
||||
0% { -o-transform: none; transform: none; }
|
||||
100% { -o-transform: translate(-32px, 0); transform: translate(-32px, 0); }
|
||||
}
|
||||
@-ms-keyframes pace-stripe-animation {
|
||||
0% { -ms-transform: none; transform: none; }
|
||||
100% { -ms-transform: translate(-32px, 0); transform: translate(-32px, 0); }
|
||||
}
|
||||
@keyframes pace-stripe-animation {
|
||||
0% { transform: none; transform: none; }
|
||||
100% { transform: translate(-32px, 0); transform: translate(-32px, 0); }
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
.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: #fcfffc;
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.pace .pace-progress-inner {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 10px #fcfffc, 0 0 5px #fcfffc;
|
||||
opacity: 1.0;
|
||||
-webkit-transform: rotate(3deg) translate(0px, -4px);
|
||||
-moz-transform: rotate(3deg) translate(0px, -4px);
|
||||
-ms-transform: rotate(3deg) translate(0px, -4px);
|
||||
-o-transform: rotate(3deg) translate(0px, -4px);
|
||||
transform: rotate(3deg) translate(0px, -4px);
|
||||
}
|
||||
|
||||
.pace .pace-activity {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: solid 2px transparent;
|
||||
border-top-color: #fcfffc;
|
||||
border-left-color: #fcfffc;
|
||||
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); }
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
extends index
|
||||
|
||||
append early-head
|
||||
<script src="/pace/pace.js"></script>
|
||||
<link rel="stylesheet" href="/pace/docs/resources/barber-pole-orange.css"></link>
|
||||
@@ -0,0 +1,5 @@
|
||||
extends index
|
||||
|
||||
append early-head
|
||||
<script src="/pace/pace.js"></script>
|
||||
<link rel="stylesheet" href="/pace/docs/resources/barber-pole-orange.css"></link>
|
||||
@@ -0,0 +1,704 @@
|
||||
<!DOCTYPE html>
|
||||
<!--[if lt IE 7]> <html class="no-js ie6 ie9-and-less ie8-and-less ie7-and-less" lang="en"> <![endif]-->
|
||||
<!--[if IE 7]> <html class="no-js ie7 ie9-and-less ie8-and-less ie7-and-less" lang="en"> <![endif]-->
|
||||
<!--[if IE 8]> <html class="no-js ie8 ie9-and-less ie8-and-less" lang="en"> <![endif]-->
|
||||
<!--[if IE 9]> <html class="no-js ie9 ie9-and-less" lang="en"> <![endif]-->
|
||||
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<title>PACE — Automatic page load progress bars</title>
|
||||
<meta name="description" content="Pace is a Javascript and CSS library to automatically add beautiful progress and activity indicators for page loads and ajax navigation. It is free and open source and was developed by HubSpot developers Adam Schwartz (@adamfschwartz) and Zack Bloom (@zackbloom).">
|
||||
<link rel="icon" href="http://static.hubspot.com/favicon.ico">
|
||||
<script type="text/javascript" src="//use.typekit.net/jbn8qxr.js"></script>
|
||||
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
|
||||
<script src="/pace/docs/lib/color.js"></script>
|
||||
<script src="/pace/docs/lib/themes.js"></script>
|
||||
<script src="/pace/pace.js"></script>
|
||||
<link href="/pace/docs/resources/flash-white.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<style id="app-colors">
|
||||
.section.colored, a.download-src-link, .button {
|
||||
background: #29d;
|
||||
}
|
||||
|
||||
a, a:hover, a:active, .header .title .title2:before {
|
||||
color: #29d;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
a, a:hover, a:active {
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "proxima-nova", "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
@media (min-width: 1700px) { html { font-size: 188%; } }
|
||||
@media (max-width: 1700px) { html { font-size: 188%; } }
|
||||
@media (max-width: 1680px) { html { font-size: 186%; } }
|
||||
@media (max-width: 1660px) { html { font-size: 184%; } }
|
||||
@media (max-width: 1640px) { html { font-size: 182%; } }
|
||||
@media (max-width: 1620px) { html { font-size: 180%; } }
|
||||
@media (max-width: 1600px) { html { font-size: 178%; } }
|
||||
@media (max-width: 1580px) { html { font-size: 176%; } }
|
||||
@media (max-width: 1560px) { html { font-size: 174%; } }
|
||||
@media (max-width: 1540px) { html { font-size: 172%; } }
|
||||
@media (max-width: 1520px) { html { font-size: 170%; } }
|
||||
@media (max-width: 1500px) { html { font-size: 168%; } }
|
||||
@media (max-width: 1480px) { html { font-size: 166%; } }
|
||||
@media (max-width: 1460px) { html { font-size: 164%; } }
|
||||
@media (max-width: 1440px) { html { font-size: 162%; } }
|
||||
@media (max-width: 1420px) { html { font-size: 160%; } }
|
||||
@media (max-width: 1400px) { html { font-size: 158%; } }
|
||||
@media (max-width: 1380px) { html { font-size: 156%; } }
|
||||
@media (max-width: 1360px) { html { font-size: 154%; } }
|
||||
@media (max-width: 1340px) { html { font-size: 152%; } }
|
||||
@media (max-width: 1320px) { html { font-size: 150%; } }
|
||||
@media (max-width: 1300px) { html { font-size: 148%; } }
|
||||
@media (max-width: 1280px) { html { font-size: 146%; } }
|
||||
@media (max-width: 1260px) { html { font-size: 144%; } }
|
||||
@media (max-width: 1240px) { html { font-size: 142%; } }
|
||||
@media (max-width: 1220px) { html { font-size: 140%; } }
|
||||
@media (max-width: 1200px) { html { font-size: 138%; } }
|
||||
@media (max-width: 1180px) { html { font-size: 136%; } }
|
||||
@media (max-width: 1160px) { html { font-size: 134%; } }
|
||||
@media (max-width: 1140px) { html { font-size: 132%; } }
|
||||
@media (max-width: 1120px) { html { font-size: 130%; } }
|
||||
@media (max-width: 1100px) { html { font-size: 128%; } }
|
||||
@media (max-width: 1080px) { html { font-size: 126%; } }
|
||||
@media (max-width: 1060px) { html { font-size: 124%; } }
|
||||
@media (max-width: 1040px) { html { font-size: 122%; } }
|
||||
@media (max-width: 1020px) { html { font-size: 120%; } }
|
||||
@media (max-width: 1000px) { html { font-size: 118%; } }
|
||||
@media (max-width: 980px) { html { font-size: 116%; } }
|
||||
@media (max-width: 960px) { html { font-size: 114%; } }
|
||||
@media (max-width: 940px) { html { font-size: 112%; } }
|
||||
@media (max-width: 920px) { html { font-size: 110%; } }
|
||||
@media (max-width: 900px) { html { font-size: 108%; } }
|
||||
@media (max-width: 880px) { html { font-size: 106%; } }
|
||||
@media (max-width: 860px) { html { font-size: 104%; } }
|
||||
@media (max-width: 840px) { html { font-size: 102%; } }
|
||||
@media (max-width: 820px) { html { font-size: 100%; } }
|
||||
@media (max-width: 800px) { html { font-size: 98%; } }
|
||||
@media (max-width: 780px) { html { font-size: 96%; } }
|
||||
@media (max-width: 760px) { html { font-size: 94%; } }
|
||||
@media (max-width: 740px) { html { font-size: 92%; } }
|
||||
@media (max-width: 720px) { html { font-size: 90%; } }
|
||||
@media (max-width: 700px) { html { font-size: 88%; } }
|
||||
@media (max-width: 680px) { html { font-size: 86%; } }
|
||||
@media (max-width: 660px) { html { font-size: 84%; } }
|
||||
@media (max-width: 640px) { html { font-size: 82%; } }
|
||||
@media (max-width: 620px) { html { font-size: 80%; } }
|
||||
@media (max-width: 600px) { html { font-size: 78%; } }
|
||||
@media (max-width: 580px) { html { font-size: 76%; } }
|
||||
@media (max-width: 560px) { html { font-size: 74%; } }
|
||||
@media (max-width: 540px) { html { font-size: 72%; } }
|
||||
@media (max-width: 520px) { html { font-size: 70%; } }
|
||||
@media (max-width: 500px) { html { font-size: 68%; } }
|
||||
@media (max-width: 480px) { html { font-size: 66%; } }
|
||||
@media (max-width: 460px) { html { font-size: 64%; } }
|
||||
@media (max-width: 440px) { html { font-size: 62%; } }
|
||||
@media (max-width: 420px) { html { font-size: 60%; } }
|
||||
@media (max-width: 400px) { html { font-size: 58%; } }
|
||||
@media (max-width: 380px) { html { font-size: 56%; } }
|
||||
@media (max-width: 360px) { html { font-size: 54%; } }
|
||||
@media (max-width: 340px) { html { font-size: 52%; } }
|
||||
@media (max-width: 320px) { html { font-size: 50%; } }
|
||||
|
||||
.header {
|
||||
color: #000;
|
||||
-webkit-transition: opacity 1s;
|
||||
-moz-transition: opacity 1s;
|
||||
-o-transition: opacity 1s;
|
||||
transition: opacity 1s;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
width: 29rem;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
.header h1 {
|
||||
font-size: 10rem;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .05em;
|
||||
}
|
||||
.header h2 {
|
||||
font-size: 5rem;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .1em;
|
||||
}
|
||||
.header .subtitle {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 1rem;
|
||||
padding-top: 9rem;
|
||||
height: 4rem;
|
||||
text-align: center;
|
||||
}
|
||||
.header .subtitle h3 {
|
||||
margin: 0;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
.header .title h1 {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 3rem;
|
||||
height: 1.4em;
|
||||
text-align: center;
|
||||
}
|
||||
.header .title .title1 {
|
||||
color: #eee;
|
||||
color: rgba(0, 0, 0, .1);
|
||||
}
|
||||
.header .title span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
.header .title .title2:before {
|
||||
position: absolute;
|
||||
top: 16.5%;
|
||||
bottom: 34%;
|
||||
left: 2%;
|
||||
right: 2%;
|
||||
content: "Progress Automatically. Certain to Entertain.";
|
||||
font-size: 1rem;
|
||||
line-height: 1.3em;
|
||||
padding: 1rem 15rem 1rem 1rem;
|
||||
background: #fff;
|
||||
opacity: 0;
|
||||
text-align: left;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-transform: translateY(-15px);
|
||||
-webkit-transition: all .3s;
|
||||
-moz-transition: all .3s;
|
||||
transition: all .3s;
|
||||
z-index: 10;
|
||||
}
|
||||
.header .title .title2:hover:before {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0px);
|
||||
}
|
||||
.header .title .char1 { left: .5%; width: 22%; }
|
||||
.header .title .char2 { left: 25%; width: 22%; }
|
||||
.header .title .char3 { left: 51%; width: 22%; }
|
||||
.header .title .char4 { left: 79.5%; width: 22%; }
|
||||
|
||||
.section {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.section.colored {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.section.colored .header .title .title2 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.section.colored .header .subtitle {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.header .title .title2 span {
|
||||
width: 0px;
|
||||
-webkit-transition: width 2s linear;
|
||||
-moz-transition: width 2s linear;
|
||||
-ms-transition: width 2s linear;
|
||||
-o-transition: width 2s linear;
|
||||
transition: width 2s linear;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page-loaded .header .title .title2 .char1 { width: 21%; }
|
||||
.page-loaded .header .title .title2 .char2 { width: 24%; }
|
||||
.page-loaded .header .title .title2 .char3 { width: 24%; }
|
||||
.page-loaded .header .title .title2 .char4 { width: 21%; }
|
||||
|
||||
|
||||
.up-arrow, .down-arrow {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.down-arrow {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
-webkit-transform: rotate(180deg);
|
||||
-moz-transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
-o-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
bottom: 30px;
|
||||
}
|
||||
|
||||
.section.colored .down-arrow {
|
||||
color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
.themes {
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
.theme {
|
||||
width: 46%;
|
||||
}
|
||||
.theme.even {
|
||||
text-align: center;
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
.theme.odd {
|
||||
text-align: center;
|
||||
float: right;
|
||||
}
|
||||
.browser {
|
||||
background: #e0e0e0;
|
||||
border: 4px solid #e0e0e0;
|
||||
width: 100%;
|
||||
height: 7rem;
|
||||
padding-top: 20px;
|
||||
margin: 0 0 10px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.browser iframe {
|
||||
border: 0;
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
input[type="color"] {
|
||||
width: 15rem;
|
||||
height: 2.3rem;
|
||||
font-size: 1rem;
|
||||
position: relative;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type="color"]::before {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 3px;
|
||||
right: 3px;
|
||||
height: 100%;
|
||||
border: 6px solid #fff;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
input[type="color"]::after {
|
||||
content: "Choose a color";
|
||||
display: block;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
height: 100%;
|
||||
font-size: .7rem;
|
||||
line-height: 2rem;
|
||||
color: #fcfcfc;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
border: 6px solid #fff;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
input[type="color"]:active::after {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.themes h3 {
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.themes h3 + p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.page {
|
||||
text-align: center;
|
||||
max-width: 28rem;
|
||||
padding: 0 10px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.themes a, .themes a:hover, .themes a:active {
|
||||
text-decoration: none;
|
||||
font-size: .7rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.themes a.author, .themes a:hover.author {
|
||||
margin: -1em 0;
|
||||
display: block;
|
||||
font-size: .5rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.themes a:hover.author {
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.themes a.author:before {
|
||||
content: "by: ";
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
a.button {
|
||||
padding: 0.5rem 1rem;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .1em;
|
||||
text-decoration: none;
|
||||
}
|
||||
.themes-pitch {
|
||||
padding: 15px;
|
||||
}
|
||||
.block {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.color-label {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="section colored">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<h1 class="title1"><span class="char1">p</span><span class="char2">a</span><span class="char3">c</span><span class="char4">e</span></h1>
|
||||
<h1 class="title2"><span class="char1">p</span><span class="char2">a</span><span class="char3">c</span><span class="char4">e</span></h1>
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
<h3>Automatic page load progress bar</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="down-arrow">⇪</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="page">
|
||||
<h2>What is Pace?</h2>
|
||||
<p style="text-align: left">Include pace.js and a CSS theme of your choice, and you get a beautiful progress indicator for your page load and ajax navigation.</p>
|
||||
<p style="text-align: left">No need to hook into any of your code, progress is detected automatically.</p>
|
||||
<br/>
|
||||
<h2>Install</h2>
|
||||
<p>The easiest way to add Pace to your site is with <a href="http://eager.io" style="color: #bf0c78">Eager</a>.
|
||||
<p>Click Install to see a live preview of Pace on your website.</p>
|
||||
<iframe style="height: 48px; width: 180px" src="//install.eager.io?appId=kYKTiQjoVjQk" allowtransparency="true" scroll="no" frameBorder="0"></iframe>
|
||||
<br/>
|
||||
<br/>
|
||||
<h2>Download</h2>
|
||||
<p>If you’re a developer, download Pace directly here:</p>
|
||||
<p><a class="button" href="https://raw.github.com/HubSpot/pace/v1.0.0/pace.min.js">Pace.js</a></p>
|
||||
<br/>
|
||||
<h2>Themes</h2>
|
||||
<label class="color-label" for="color-select">Enter a color:</label>
|
||||
<input type="color" value="#2299dd" id="color-select"></input>
|
||||
<div class="themes"></div>
|
||||
<p class="block">Submit a theme! <a href="https://github.com/HubSpot/pace">Fork us on GitHub</a></p>
|
||||
<p class="block"><a class="button" href="http://github.hubspot.com/pace/">Documentation</a></p>
|
||||
<br/>
|
||||
<p style="font-size: 0.6rem"><a href="http://dev.hubspot.com">HubSpot</a></p>
|
||||
<br/>
|
||||
<br/>
|
||||
<script>
|
||||
$(function(){
|
||||
if (!Modernizr.inputtypes.color)
|
||||
$('.color-label').show();
|
||||
|
||||
var themes = [{
|
||||
name: 'minimal',
|
||||
title: 'Minimal',
|
||||
author: 'adamschwartz'
|
||||
}, {
|
||||
name: 'flash',
|
||||
title: 'Flash',
|
||||
author: 'adamschwartz'
|
||||
}, {
|
||||
name: 'barber-shop',
|
||||
title: 'Barber Shop',
|
||||
author: 'adamschwartz'
|
||||
}, {
|
||||
name: 'mac-osx',
|
||||
title: 'Mac OSX',
|
||||
author: 'adamschwartz'
|
||||
}, {
|
||||
name: 'fill-left',
|
||||
title: 'Fill Left',
|
||||
author: 'adamschwartz'
|
||||
}, {
|
||||
name: 'flat-top',
|
||||
title: 'Flat Top',
|
||||
author: 'adamschwartz'
|
||||
}, {
|
||||
name: 'big-counter',
|
||||
title: 'Big Counter',
|
||||
author: 'adamschwartz'
|
||||
}, {
|
||||
name: 'corner-indicator',
|
||||
title: 'Corner Indicator',
|
||||
author: 'adamschwartz'
|
||||
}, {
|
||||
name: 'bounce',
|
||||
title: 'Bounce',
|
||||
author: 'adamschwartz'
|
||||
}, {
|
||||
name: 'loading-bar',
|
||||
title: 'Loading Bar',
|
||||
author: 'gavJackson'
|
||||
}, {
|
||||
name: 'center-circle',
|
||||
title: 'Center Circle',
|
||||
author: 'adamschwartz'
|
||||
}, {
|
||||
name: 'center-atom',
|
||||
title: 'Center Atom',
|
||||
author: 'kennyglenn'
|
||||
}, {
|
||||
name: 'center-radar',
|
||||
title: 'Center Radar',
|
||||
author: 'kennyglenn'
|
||||
}, {
|
||||
name: 'center-simple',
|
||||
title: 'Center Simple',
|
||||
author: 'dineshgithub'
|
||||
}];
|
||||
|
||||
var init = function() {
|
||||
$.each(themes, function(i, theme){
|
||||
$('.themes').append('<div class="theme ' + (i % 2 === 0 ? 'even' : 'odd') + '">'+
|
||||
'<h3>' + theme.title + '</h3>' +
|
||||
(theme.author ? '<br/><a class="author" href="https://github.com/' + theme.author + '" target="_blank" rel="nofollow">@' + theme.author + '</a></h4>' : '') +
|
||||
'<p><a href="#" class="download-link" data-theme="' + theme.name + '">download</a></p>'+
|
||||
'<div class="browser"><iframe data-theme="' + theme.name + '"></iframe></div>' +
|
||||
'</div>');
|
||||
});
|
||||
|
||||
var $color = $('input[type="color"]');
|
||||
|
||||
var cssCache = {};
|
||||
var initFrame = function(frame, color){
|
||||
if ($color.val() != '#2299dd')
|
||||
color = $color.val();
|
||||
|
||||
var $styleEl = $('<style>')
|
||||
$(frame).contents().find('body').append($styleEl);
|
||||
|
||||
var context = {};
|
||||
if (color)
|
||||
context.color = color;
|
||||
|
||||
var themeName = $(frame).data('theme')
|
||||
loadTheme(themeName, function(theme){
|
||||
body = compileTheme(theme, context);
|
||||
|
||||
cssCache[themeName] = body;
|
||||
|
||||
$styleEl.html(body);
|
||||
});
|
||||
|
||||
$(frame).contents().find('.pace').addClass('pace-active');
|
||||
};
|
||||
|
||||
var updateColor = function(color){
|
||||
$('.browser iframe').each(function(){
|
||||
initFrame(this, color);
|
||||
});
|
||||
};
|
||||
|
||||
var downloadTheme = function(theme){
|
||||
location.href = 'data:text/css,' + encodeURIComponent(cssCache[theme]);
|
||||
};
|
||||
|
||||
$('.browser iframe').each(function(){
|
||||
var _this = this;
|
||||
|
||||
doc = (this.contentWindow || this.documentWindow).document;
|
||||
doc.open();
|
||||
doc.write('' +
|
||||
'<div class="pace">' +
|
||||
'<div class="pace-progress" data-progress="50" data-progress-text="50%" style="-webkit-transform: translate3d(50%, 0px, 0px); -ms-transform: translate3d(50%, 0px, 0px); transform: translate3d(50%, 0px, 0px);">' +
|
||||
'<div class="pace-progress-inner"></div>' +
|
||||
'</div>' +
|
||||
'<div class="pace-activity"></div>' +
|
||||
'</div>' +
|
||||
'');
|
||||
doc.close();
|
||||
|
||||
// For some strange reason, the Color library we depend on defines itself
|
||||
// asyncronously
|
||||
setTimeout(function(){
|
||||
initFrame(_this);
|
||||
}, 0);
|
||||
});
|
||||
|
||||
$color.on('change keyup', function(){
|
||||
var color = $(this).val();
|
||||
updateColor(color);
|
||||
|
||||
var css = '.section.colored, a.button { background: ' + color + '; } a, a:hover, a:active, .header .title .title2:before { color: ' + color + '; }';
|
||||
if ($('html').hasClass('ie8-and-less')) {
|
||||
$('#app-colors').get(0).styleSheet.cssText = css
|
||||
} else {
|
||||
$('#app-colors').html(css);
|
||||
}
|
||||
});
|
||||
|
||||
$('a.download-link').click(function(e){
|
||||
e.preventDefault();
|
||||
|
||||
var theme = $(this).data('theme');
|
||||
|
||||
downloadTheme(theme);
|
||||
});
|
||||
};
|
||||
|
||||
var initTimeout = setTimeout(function(){
|
||||
$(window).unbind('scroll', scrollOnce);
|
||||
init();
|
||||
}, 3000);
|
||||
|
||||
var scrollOnce = function() {
|
||||
$(window).unbind('scroll', scrollOnce);
|
||||
clearTimeout(initTimeout);
|
||||
init();
|
||||
};
|
||||
|
||||
$(window).bind('scroll', scrollOnce);
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>setTimeout(function(){ document.body.className = 'page-loaded' }, 0);</script>
|
||||
|
||||
<!-- Share -->
|
||||
|
||||
<style>
|
||||
#retweet_button {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
left: 30px;
|
||||
width: 100px;
|
||||
-webkit-filter: grayscale(1) contrast(1.3);
|
||||
z-index: 3;
|
||||
}
|
||||
#retweet_button:hover {
|
||||
-webkit-filter: none;
|
||||
}
|
||||
#github_stars {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
left: 130px;
|
||||
width: 100px;
|
||||
-webkit-filter: grayscale(1) contrast(1.3);
|
||||
z-index: 3;
|
||||
}
|
||||
#github_stars:hover {
|
||||
-webkit-filter: none;
|
||||
}
|
||||
.hn-share-button-wrapper {
|
||||
position: fixed;
|
||||
bottom: 29px;
|
||||
left: 227px;
|
||||
-webkit-filter: grayscale(1) contrast(1.3);
|
||||
z-index: 3;
|
||||
}
|
||||
.hn-share-button-wrapper:hover {
|
||||
-webkit-filter: none;
|
||||
}
|
||||
</style>
|
||||
<div id="retweet_button">
|
||||
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://github.hubspot.com/pace/docs/welcome" data-text="pace.js - Add an automatic page load progress bar to your site" data-count="horizontal" data-via="HubSpotDev">Tweet</a>
|
||||
<script>
|
||||
if (Math.random() >= 0.5)
|
||||
var recommends = ['hubspotdev', 'zackbloom', 'adamfschwartz'];
|
||||
else
|
||||
var recommends = ['hubspotdev', 'adamfschwartz', 'zackbloom'];
|
||||
|
||||
var $button = $('.twitter-share-button');
|
||||
if ($button.length)
|
||||
$button.data('related', recommends.join(','));
|
||||
</script>
|
||||
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
|
||||
</div>
|
||||
<div id="github_stars">
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=HubSpot&repo=pace&type=watch&count=true&size=small" allowtransparency="true" frameborder="0" scrolling="0" width="200" height="20"></iframe>
|
||||
</div>
|
||||
|
||||
<!-- Start of Async HubSpot Analytics Code -->
|
||||
<script type="text/javascript">
|
||||
(function(d,s,i,r) {
|
||||
if (d.getElementById(i)){return;}
|
||||
var n=d.createElement(s),e=d.getElementsByTagName(s)[0];
|
||||
n.id=i;n.src='//js.hubspot.com/analytics/'+(Math.ceil(new Date()/r)*r)+'/51294.js';
|
||||
e.parentNode.insertBefore(n, e);
|
||||
})(document,"script","hs-analytics",300000);
|
||||
</script>
|
||||
<!-- End of Async HubSpot Analytics Code -->
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-45159009-1', 'hubspot.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
|
||||
<!-- Force 3d acceleration always and forever :) -->
|
||||
<div style="-webkit-transform: translateZ(0)"></div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user