Skip to content

Commit d718df4

Browse files
authored
Merge pull request #238 from canjs/fix/212/bit-docs-html-canjs
Add an indicator when a new page is being loaded
2 parents 484598e + dd5de38 commit d718df4

File tree

5 files changed

+101
-2
lines changed

5 files changed

+101
-2
lines changed

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@ node_modules/
22
temp/
33
index.html
44
.vscode
5+
*.log
56
.DS_Store

static/canjs.js

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1+
require("./canjs.less!");
2+
var LoadingBar = require('./loading-bar.js');
13
$ = require("jquery");
24
var debounce = require("lodash/debounce");
3-
require("./canjs.less!");
5+
var loader = new LoadingBar('blue');
46
var SearchControl = require('./search');
57

68
// state
@@ -169,9 +171,21 @@ function navigate(href) {
169171
// clear existing scroll interval if it's still alive
170172
clearInterval(scrollPositionInterval);
171173

174+
loader.start();
175+
172176
navigating = true;
173177
$.ajax(href, {
174178
dataType: "text",
179+
xhr: function() {
180+
var xhr = new window.XMLHttpRequest();
181+
xhr.addEventListener("progress", function(evt){
182+
if (evt.lengthComputable) {
183+
var percentComplete = (evt.loaded / evt.total) * 100;
184+
loader.update(Math.floor(percentComplete));
185+
}
186+
}, false);
187+
return xhr;
188+
},
175189
success: function(content) {
176190
// Google Analytics
177191
ga('send', 'pageview', window.location.pathname);
@@ -209,6 +223,8 @@ function navigate(href) {
209223
// Initialize github buttons
210224
$.getScript('https://buttons.github.io/buttons.js');
211225

226+
loader.end();
227+
212228
// go through every package and re-init
213229
for (var packageName in window.PACKAGES) {
214230
if (typeof window.PACKAGES[packageName] === "function") {

static/canjs.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,5 +19,5 @@
1919
@import "mobile.less";
2020
@import "breadcrumb.less";
2121
@import "screenshots.less";
22+
@import "loading-bar.less";
2223
@import "search.less";
23-

static/loading-bar.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
function LoadingBar(c){
2+
this.meter = $('<span>', {style: 'width:0%;'});
3+
this.elem = $('<div>', {style: 'display:none', class: 'meter animate '+c}).append(
4+
this.meter.append($('<span>'))
5+
);
6+
$('body').prepend(this.elem);
7+
return this;
8+
}
9+
10+
LoadingBar.prototype.start = function(){
11+
this.meter.css('width', '1%');
12+
this.elem.show();
13+
};
14+
15+
LoadingBar.prototype.end = function(){
16+
this.elem.hide();
17+
};
18+
19+
LoadingBar.prototype.update = function(p){
20+
this.meter.css('width', p+'%');
21+
};
22+
23+
module.exports = LoadingBar;

static/loading-bar.less

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
.meter {
2+
position: absolute;
3+
top:0;
4+
left:0;
5+
width: 100%;
6+
z-index: 100;
7+
}
8+
9+
.meter > span {
10+
display: block;
11+
height: 100%;
12+
overflow: hidden;
13+
height: 5px;
14+
}
15+
16+
.blue > span {
17+
background-color: #4ea9f7;
18+
background-image: linear-gradient(to bottom, #4ea9f7, #3385d4);
19+
}
20+
21+
.meter > span:after {
22+
content: "";
23+
position: absolute;
24+
top: 0; left: 0; bottom: 0; right: 0;
25+
background-image: linear-gradient(
26+
-45deg,
27+
rgba(255, 255, 255, .2) 25%,
28+
transparent 25%,
29+
transparent 50%,
30+
rgba(255, 255, 255, .2) 50%,
31+
rgba(255, 255, 255, .2) 75%,
32+
transparent 75%,
33+
transparent
34+
);
35+
z-index: 1;
36+
background-size: 50px 50px;
37+
animation: move 2s linear infinite;
38+
border-top-right-radius: 8px;
39+
border-bottom-right-radius: 8px;
40+
border-top-left-radius: 20px;
41+
border-bottom-left-radius: 20px;
42+
overflow: hidden;
43+
}
44+
45+
.meter > span:after {
46+
display: none;
47+
}
48+
.animate > span:after {
49+
display: block;
50+
}
51+
52+
@keyframes move {
53+
0% {
54+
background-position: 0 0;
55+
}
56+
100% {
57+
background-position: -50px -50px;
58+
}
59+
}

0 commit comments

Comments
 (0)