Skip to content

Commit 6186975

Browse files
zackbloomzackbloom
committed
Make readme link to real docs
1 parent 13d6daf commit 6186975

2 files changed

Lines changed: 185 additions & 159 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 159 deletions
Original file line numberDiff line numberDiff line change
@@ -12,162 +12,5 @@ it will begin again!
1212
If you use AMD or Browserify, require in pace.js and call `pace.start()` as early in
1313
the loading process as is possible.
1414

15-
Configuration
16-
-------------
17-
18-
Pace is fully automatic, no configuration is necessary to get started.
19-
20-
If you would like to make some tweaks, here's how:
21-
22-
You can set `window.paceOptions` before bringing in the file:
23-
24-
```javascript
25-
paceOptions = {
26-
// Disable the 'elements' source
27-
elements: false
28-
}
29-
```
30-
31-
You can also put options on the script tag:
32-
33-
```html
34-
<script data-pace-options='{ "ajax": false }' src='pace.js'></script>
35-
```
36-
37-
If you're using AMD or Browserify, you can pass your options to `start`:
38-
39-
```javascript
40-
define(['pace'], function(pace){
41-
pace.start({
42-
document: false
43-
});
44-
});
45-
```
46-
47-
Themes
48-
------
49-
50-
Pace includes a bunch of [themes](http://github.hubspot.com/pace/docs/themes/)
51-
to get you started. Just include the appropriate css file. Send us a PR with
52-
any interesting themes you create.
53-
54-
Collectors
55-
----------
56-
57-
Collectors are the bits of code which gather progress information. Pace includes four default collectors:
58-
59-
- Ajax
60-
61-
Monitors all ajax requests on the page
62-
63-
- Elements
64-
65-
Checks for the existance of specific elements on the page
66-
67-
- Document
68-
69-
Checks the document readyState
70-
71-
- Event Lag
72-
73-
Checks for event loop lag signaling that javascript is being executed
74-
75-
They can each be configured or disabled through configuration options of the same name.
76-
77-
```javascript
78-
paceOptions = {
79-
ajax: false, // disabled
80-
document: false, // disabled
81-
eventLag: false, // disabled
82-
elements: {
83-
selectors: ['.my-page']
84-
}
85-
};
86-
```
87-
88-
Add your own classes to `paceOptions.extraSources` to add more sources. Each source should either
89-
have a `.progress` property, or a `.elements` property which is a list of objects with
90-
`.progress` properties. Pace will automatically handle all scaling to make the progress
91-
changes look smooth to the user.
92-
93-
Elements
94-
--------
95-
96-
Elements being rendered to the screen is one way for us to decide that the page has been
97-
rendered. If you would like to use that source of information (not required at all),
98-
specify one or more selectors. You can comma seperate the selectors to propertly handle
99-
error states, where the progress bar should disappear, but the element were looking for
100-
may never apper:
101-
102-
```javascript
103-
paceOptions = {
104-
elements: {
105-
selectors: ['.timeline,.timeline-error', '.user-profile,.profile-error']
106-
}
107-
}
108-
```
109-
110-
Pace will consider the elements test successful when each selector matches something. For
111-
this example, when either `.timeline` or `.timeline-error` exist, and either `.user-profile`
112-
or `.profile-error` exist.
113-
114-
Restart Rules
115-
-------------
116-
117-
Most users want the progress bar to automatically restart when a pushState event occurs
118-
(generally means ajax navigation is occuring). You can disable this:
119-
120-
```javascript
121-
paceOptions: {
122-
restartOnPushState: false
123-
}
124-
```
125-
126-
You can always trigger a restart manually by calling `Pace.restart()`
127-
128-
See [the source](https://github.com/HubSpot/pace/blob/master/pace.coffee) for a full list of all options.
129-
130-
API
131-
---
132-
133-
Pace exposes the following methods:
134-
135-
- `Pace.start`: Show the progress bar and start updating. Called automatically if you don't use AMD or CommonJS.
136-
137-
- `Pace.restart`: Show the progress bar if it's hidden and start reporting the progress from scratch. Called automatically
138-
whenever `pushState` or `replaceState` is called by default.
139-
140-
- `Pace.stop`: Hide the progress bar and stop updating it.
141-
142-
Dependencies
143-
------------
144-
145-
None!
146-
147-
Support
148-
-------
149-
150-
Pace is designed to support IE8+ (standards mode), FF 3.5+, Chrome, Safari 4+, Opera 10.5+, and all modern
151-
mobile browsers. If you run into a compatibility issue, or can make a case for supporting something else,
152-
please create an issue.
153-
154-
Size
155-
----
156-
157-
pace.js is 4kb minified and gzipped. The themes vary between 0.5 and 4kb.
158-
159-
Issues
160-
------
161-
162-
We have obviously not tested this on every website. If you run into an issue, or find a way the automatic
163-
detection could be better, please create an Issue. If you can include a test case, that's even better.
164-
165-
Credits
166-
-------
167-
168-
[HubSpot](http://dev.hubspot.com)
169-
170-
Javascript by [Zack Bloom](http://twitter.com/zackbloom)
171-
CSS by [Adam Schwartz](http://twitter.com/adamfschwartz)
172-
173-
Themes inspired by [Mary Lou](http://tympanus.net/codrops/2013/09/18/creative-loading-effects/)
15+
### [Demo](http://github.hubspot.com/pace/docs/welcome/)
16+
### [Documentation](http://github.hubspot.com/pace/)

‎docs/intro.md‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
pace
2+
====
3+
4+
Include [pace.js](https://raw.github.com/HubSpot/pace/v0.4.3/pace.min.js) and the
5+
[theme](http://github.hubspot.com/pace/docs/themes/) css of your choice on your page
6+
(as early as is possible), and you're done!
7+
8+
Pace will automatically monitor your ajax requests, event loop lag, document
9+
ready state, and elements on your page to decide the progress. On ajax navigation
10+
it will begin again!
11+
12+
If you use AMD or Browserify, require in pace.js and call `pace.start()` as early in
13+
the loading process as is possible.
14+
15+
Example
16+
-------
17+
18+
```html
19+
<head>
20+
<script src="/pace/pace.js"></script>
21+
<link href="/pace/themes/pace-theme-barber-pole.css" rel="stylesheet" />
22+
</head>
23+
```
24+
25+
Configuration
26+
-------------
27+
28+
Pace is fully automatic, no configuration is necessary to get started.
29+
30+
If you would like to make some tweaks, here's how:
31+
32+
You can set `window.paceOptions` before bringing in the file:
33+
34+
```javascript
35+
paceOptions = {
36+
// Disable the 'elements' source
37+
elements: false
38+
}
39+
```
40+
41+
You can also put options on the script tag:
42+
43+
```html
44+
<script data-pace-options='{ "ajax": false }' src='pace.js'></script>
45+
```
46+
47+
If you're using AMD or Browserify, you can pass your options to `start`:
48+
49+
```javascript
50+
define(['pace'], function(pace){
51+
pace.start({
52+
document: false
53+
});
54+
});
55+
```
56+
57+
Themes
58+
------
59+
60+
Pace includes a bunch of [themes](http://github.hubspot.com/pace/docs/themes/)
61+
to get you started. Just include the appropriate css file. Send us a PR with
62+
any interesting themes you create.
63+
64+
Collectors
65+
----------
66+
67+
Collectors are the bits of code which gather progress information. Pace includes four default collectors:
68+
69+
- Ajax
70+
71+
Monitors all ajax requests on the page
72+
73+
- Elements
74+
75+
Checks for the existance of specific elements on the page
76+
77+
- Document
78+
79+
Checks the document readyState
80+
81+
- Event Lag
82+
83+
Checks for event loop lag signaling that javascript is being executed
84+
85+
They can each be configured or disabled through configuration options of the same name.
86+
87+
```javascript
88+
paceOptions = {
89+
ajax: false, // disabled
90+
document: false, // disabled
91+
eventLag: false, // disabled
92+
elements: {
93+
selectors: ['.my-page']
94+
}
95+
};
96+
```
97+
98+
Add your own classes to `paceOptions.extraSources` to add more sources. Each source should either
99+
have a `.progress` property, or a `.elements` property which is a list of objects with
100+
`.progress` properties. Pace will automatically handle all scaling to make the progress
101+
changes look smooth to the user.
102+
103+
Elements
104+
--------
105+
106+
Elements being rendered to the screen is one way for us to decide that the page has been
107+
rendered. If you would like to use that source of information (not required at all),
108+
specify one or more selectors. You can comma seperate the selectors to propertly handle
109+
error states, where the progress bar should disappear, but the element were looking for
110+
may never apper:
111+
112+
```javascript
113+
paceOptions = {
114+
elements: {
115+
selectors: ['.timeline,.timeline-error', '.user-profile,.profile-error']
116+
}
117+
}
118+
```
119+
120+
Pace will consider the elements test successful when each selector matches something. For
121+
this example, when either `.timeline` or `.timeline-error` exist, and either `.user-profile`
122+
or `.profile-error` exist.
123+
124+
Restart Rules
125+
-------------
126+
127+
Most users want the progress bar to automatically restart when a pushState event occurs
128+
(generally means ajax navigation is occuring). You can disable this:
129+
130+
```javascript
131+
paceOptions: {
132+
restartOnPushState: false
133+
}
134+
```
135+
136+
You can always trigger a restart manually by calling `Pace.restart()`
137+
138+
See [the source](https://github.com/HubSpot/pace/blob/master/pace.coffee) for a full list of all options.
139+
140+
API
141+
---
142+
143+
Pace exposes the following methods:
144+
145+
- `Pace.start`: Show the progress bar and start updating. Called automatically if you don't use AMD or CommonJS.
146+
147+
- `Pace.restart`: Show the progress bar if it's hidden and start reporting the progress from scratch. Called automatically
148+
whenever `pushState` or `replaceState` is called by default.
149+
150+
- `Pace.stop`: Hide the progress bar and stop updating it.
151+
152+
Dependencies
153+
------------
154+
155+
None!
156+
157+
Support
158+
-------
159+
160+
Pace is designed to support IE8+ (standards mode), FF 3.5+, Chrome, Safari 4+, Opera 10.5+, and all modern
161+
mobile browsers. If you run into a compatibility issue, or can make a case for supporting something else,
162+
please create an issue.
163+
164+
Size
165+
----
166+
167+
pace.js is 4kb minified and gzipped. The themes vary between 0.5 and 4kb.
168+
169+
Issues
170+
------
171+
172+
We have obviously not tested this on every website. If you run into an issue, or find a way the automatic
173+
detection could be better, please create an Issue. If you can include a test case, that's even better.
174+
175+
Credits
176+
-------
177+
178+
[HubSpot](http://dev.hubspot.com)
179+
180+
Javascript by [Zack Bloom](http://twitter.com/zackbloom)
181+
CSS by [Adam Schwartz](http://twitter.com/adamfschwartz)
182+
183+
Themes inspired by [Mary Lou](http://tympanus.net/codrops/2013/09/18/creative-loading-effects/)

0 commit comments

Comments
 (0)