Add: progress bar

404.html

@@ -4,6 +4,10 @@
 permalink: 404.html
 ---
 
+<script>
+var global_notdone = false;
+</script>
+
 <div>
   <h2 class="page-title">404: Page not found</h1>
   <p class="lead">Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. <a href="{{ site.baseurl }}/">Head back home</a> to try finding it again.</p>

_includes/head.html

@@ -20,7 +20,7 @@
     {% include toc.css %}
 
     {% include podcast.css %}
-
+    {% include nprogress.css %}
 
   </style>
   <link rel="apple-touch-icon" sizes="180x180" href="{{ site.baseurl }}/images/icons/apple-touch-icon.png">

_includes/inf.html

@@ -59,3 +59,46 @@
 }
 
 </style>
+
+
+
+<script>
+{% include nprogress.min.js %}
+
+
+
+function getScrollPercent() {
+    var h = document.documentElement, 
+        b = document.body,
+        st = 'scrollTop',
+        sh = 'scrollHeight';
+    return (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight);
+}
+
+if (typeof global_notdone === 'undefined') {
+    var global_notdone = true;
+}
+
+if(global_notdone){
+  NProgress.configure({ trickle: false, showSpinner: false, minimum: 0.01 });
+
+  NProgress.start();
+}
+
+function update_nprogress(){
+  var perc = getScrollPercent()
+  if(perc > 0.98 && global_notdone){
+    NProgress.done();
+    global_notdone = false;
+  }
+  if(global_notdone){
+      NProgress.set(getScrollPercent())
+  }
+}
+
+if(global_notdone){
+  document.addEventListener("scroll", update_nprogress);
+  document.addEventListener("touchmove", update_nprogress);
+}
+
+</script>

_includes/nprogress.css

@@ -0,0 +1,78 @@
+#nprogress {
+    pointer-events: none;
+}
+
+#nprogress .bar {
+    background: #29d;
+    position: fixed;
+    z-index: 1031;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+}
+
+#nprogress .peg {
+    display: block;
+    position: absolute;
+    right: 0px;
+    width: 100px;
+    height: 100%;
+    box-shadow: 0 0 10px #29d, 0 0 5px #29d;
+    opacity: 1.0;
+    -webkit-transform: rotate(3deg) translate(0px, -4px);
+    -ms-transform: rotate(3deg) translate(0px, -4px);
+    transform: rotate(3deg) translate(0px, -4px);
+}
+
+/*#nprogress .spinner {
+    display: block;
+    position: fixed;
+    z-index: 1031;
+    top: 15px;
+    right: 15px;
+}*/
+
+/*#nprogress .spinner-icon {
+    width: 18px;
+    height: 18px;
+    box-sizing: border-box;
+    border: solid 2px transparent;
+    border-top-color: #29d;
+    border-left-color: #29d;
+    border-radius: 50%;
+    -webkit-animation: nprogress-spinner 400ms linear infinite;
+    animation: nprogress-spinner 400ms linear infinite;
+}*/
+
+.nprogress-custom-parent {
+    overflow: hidden;
+    position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+    position: absolute;
+}
+
+.nprogress-custom-parent #nprogress .spinner{
+    display: none;
+}
+
+/*@-webkit-keyframes nprogress-spinner {
+    0% {
+        -webkit-transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(360deg);
+    }
+}*/
+
+/*@keyframes nprogress-spinner {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}*/

like.html

@@ -3,6 +3,10 @@
 title: Like
 ---
 
+<script>
+var global_notdone = false;
+</script>
+
 <style>
 body.no-feature-like .upvote-click{
     display: initial;

live.html

@@ -3,6 +3,10 @@
 title: Live Updates and Bloggers from Data Science Community
 ---
 
+<script>
+var global_notdone = false;
+</script>
+
 <style>
 .inner-app-hide{
     display: none;

privacy.html

@@ -3,6 +3,10 @@
 title: Privacy on R Weekly
 ---
 
+<script>
+var global_notdone = false;
+</script>
+
 <h1>Privacy on R Weekly</h1>
 
 <p>R Weekly is dedicated to providing privacy on the Internet. To provide you with the choice of opting-out of analytics.</p>

random.html

@@ -3,6 +3,10 @@
 title: Random
 ---
 
+<script>
+var global_notdone = false;
+</script>
+
 <script>
     var xhr = new XMLHttpRequest();
     xhr.open("GET","https://page.rweekly.org/?page="+"rweekly.org/random.html");

search.html

@@ -3,5 +3,10 @@
 title: Search
 ---
 
+<script>
+var global_notdone = false;
+</script>
+
+
 <h1>Search R Weekly</h1>
 

submit.html

@@ -3,6 +3,10 @@
 title: Submit
 ---
 
+<script>
+var global_notdone = false;
+</script>
+
 <div class="post">
 {% raw %}
 

wechat.md

@@ -3,6 +3,11 @@ layout: page
 title: Follow R Weekly WeChat
 ---
 
+<script>
+var global_notdone = false;
+</script>
+
+
 Please use WeChat to scan this QR code.
 
 ![wechat](/public/wechat-qrcode.jpg)