Merge pull request #238 from canjs/fix/212/bit-docs-html-canjs

Add an indicator when a new page is being loaded

Author: imaustink

.gitignore

@@ -2,4 +2,5 @@ node_modules/
 temp/
 index.html
 .vscode
+*.log
 .DS_Store

static/canjs.js

@@ -1,6 +1,8 @@
+require("./canjs.less!");
+var LoadingBar = require('./loading-bar.js');
 $ = require("jquery");
 var debounce = require("lodash/debounce");
-require("./canjs.less!");
+var loader = new LoadingBar('blue');
 var SearchControl = require('./search');
 
 // state
@@ -169,9 +171,21 @@ function navigate(href) {
 	// clear existing scroll interval if it's still alive
 	clearInterval(scrollPositionInterval);
 
+	loader.start();
+	
 	navigating = true;
 	$.ajax(href, {
 		dataType: "text",
+		xhr: function() {
+			var xhr = new window.XMLHttpRequest();
+			xhr.addEventListener("progress", function(evt){
+				if (evt.lengthComputable) {
+					var percentComplete = (evt.loaded / evt.total) * 100;
+					loader.update(Math.floor(percentComplete));
+				}
+			}, false);
+			return xhr;
+		},
 		success: function(content) {
 			// Google Analytics
 			ga('send', 'pageview', window.location.pathname);
@@ -209,6 +223,8 @@ function navigate(href) {
 			// Initialize github buttons
 			$.getScript('https://buttons.github.io/buttons.js');
 
+			loader.end();
+			
 			// go through every package and re-init
 			for (var packageName in window.PACKAGES) {
 				if (typeof window.PACKAGES[packageName] === "function") {

static/canjs.less

@@ -19,5 +19,5 @@
 @import "mobile.less";
 @import "breadcrumb.less";
 @import "screenshots.less";
+@import "loading-bar.less";
 @import "search.less";
-

static/loading-bar.js

@@ -0,0 +1,23 @@
+function LoadingBar(c){
+    this.meter = $('<span>', {style: 'width:0%;'});
+    this.elem = $('<div>', {style: 'display:none', class: 'meter animate '+c}).append(
+      this.meter.append($('<span>'))
+  );
+  $('body').prepend(this.elem);
+    return this;
+}
+
+LoadingBar.prototype.start = function(){
+    this.meter.css('width', '1%');
+    this.elem.show();
+};
+
+LoadingBar.prototype.end = function(){
+    this.elem.hide();
+};
+
+LoadingBar.prototype.update = function(p){
+    this.meter.css('width', p+'%');
+};
+
+module.exports = LoadingBar;

static/loading-bar.less

@@ -0,0 +1,59 @@
+.meter { 
+	position: absolute;
+	top:0;
+	left:0;
+	width: 100%;
+	z-index: 100;
+}
+
+.meter > span {
+	display: block;
+	height: 100%;
+	overflow: hidden;
+	height: 5px;
+}
+
+.blue > span {
+	background-color: #4ea9f7;
+	background-image: linear-gradient(to bottom, #4ea9f7, #3385d4);
+}
+
+.meter > span:after {
+	content: "";
+	position: absolute;
+	top: 0; left: 0; bottom: 0; right: 0;
+	background-image: linear-gradient(
+		-45deg, 
+		rgba(255, 255, 255, .2) 25%, 
+		transparent 25%, 
+		transparent 50%, 
+		rgba(255, 255, 255, .2) 50%, 
+		rgba(255, 255, 255, .2) 75%, 
+		transparent 75%, 
+		transparent
+	);
+	z-index: 1;
+	background-size: 50px 50px;
+	animation: move 2s linear infinite;
+	border-top-right-radius: 8px;
+	border-bottom-right-radius: 8px;
+	border-top-left-radius: 20px;
+	border-bottom-left-radius: 20px;
+	overflow: hidden;
+}
+
+.meter > span:after {
+	display: none;
+}
+.animate > span:after {
+	display: block;
+}
+
+@keyframes move {
+	0% {
+		background-position: 0 0;
+	}
+	100% {
+		background-position: -50px -50px;
+	}
+}