diff --git a/README.md b/README.md
index 2fb33133..b095f692 100644
--- a/README.md
+++ b/README.md
@@ -182,13 +182,15 @@ For the initial page load, `getInitialProps` will execute on the server only. `g
### Routing
+#### With ``
+
-#### With ``
-
Client-side transitions between routes can be enabled via a `` component. Consider these two pages:
```jsx
@@ -225,6 +227,14 @@ The second `as` parameter for `push` and `replace` is an optional _decoration_ o
#### Imperatively
+
+
You can also do client-side page transitions using the `next/router`
```jsx
@@ -247,6 +257,49 @@ The second `as` parameter for `push` and `replace` is an optional _decoration_ o
_Note: in order to programmatically change the route without triggering navigation and component-fetching, use `props.url.push` and `props.url.replace` within a component_
+##### Router Events
+
+You can also listen to different events happening inside the Router.
+Here's a list of supported events:
+
+- `routeChangeStart(url)` - Fires when a route starts to change
+- `routeChangeComplete(url)` - Fires when a route changed completely
+- `routeChangeError(err, url)` - Fires when there's an error when changing routes
+
+> Here `url` is the URL shown in the browser. If you call `Router.push(url, as)` (or similar), then the value of `url` will be `as`.
+
+Here's how to property listen to the router event `routeChangeStart`:
+
+```js
+Router.onRouteChangeStart = (url) => {
+ console.log('App is changing to: ', url)
+}
+```
+
+If you are no longer want to listen to that event, you can simply unset the event listener like this:
+
+```js
+Router.onRouteChangeStart = null
+```
+
+##### Cancelled (Abort) Routes
+
+Sometimes, you might want to change a route before the current route gets completed. Current route may be downloading the page or running `getInitialProps`.
+In that case, we abort the current route and process with the new route.
+
+If you need, you could capture those cancelled routes via `routeChangeError` router event. See:
+
+```js
+Router.onRouteChangeError = (err, url) => {
+ if (err.cancelled) {
+ console.log(`Route to ${url} is cancelled!`)
+ return
+ }
+
+ // Some other error
+}
+```
+
### Prefetching Pages
diff --git a/examples/with-loading/README.md b/examples/with-loading/README.md
new file mode 100644
index 00000000..89f2ad39
--- /dev/null
+++ b/examples/with-loading/README.md
@@ -0,0 +1,35 @@
+# Example app with page loading indicator
+
+## How to use
+
+Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-loading
+cd with-loading
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+```
+
+## The idea behind the example
+
+Sometimes when switching between pages, Next.js needs to download pages(chunks) from the server before rendering the page. And it may also need to wait for the data. So while doing these tasks, browser might be non responsive.
+
+We can simply fix this issue by showing a loading indicator. That's what this examples shows.
+
+It features:
+
+* An app with two pages which uses a common [Header](./components/Header.js) component for navigation links.
+* Using `next/router` to identify different router events
+* Uses [nprogress](https://github.com/rstacruz/nprogress) as the loading indicator.
diff --git a/examples/with-loading/components/Header.js b/examples/with-loading/components/Header.js
new file mode 100644
index 00000000..a0a62f15
--- /dev/null
+++ b/examples/with-loading/components/Header.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import Head from 'next/head'
+import Link from 'next/link'
+import NProgress from 'nprogress'
+import Router from 'next/router'
+
+Router.onRouteChangeStart = (url) => {
+ console.log(`Loading: ${url}`)
+ NProgress.start()
+}
+Router.onRouteChangeComplete = () => NProgress.done()
+Router.onRouteChangeError = () => NProgress.done()
+
+const linkStyle = {
+ margin: '0 10px 0 0'
+}
+
+export default () => (
+