add loading bar

diff --git a/panikweb_templates/static/css/_specifics.scss b/panikweb_templates/static/css/_specifics.scss
index 902716d82c61e668c6ef30428655f7118f431c2b..7efd5e7a1f06c975f8a3edb961db9ec327e41b4d 100644 (file)
--- a/panikweb_templates/static/css/_specifics.scss
+++ b/panikweb_templates/static/css/_specifics.scss
@@ -2090,3 +2090,25 @@ div.programCell a.playlist {
                }
        }
 }
+
+div#loading-page {
+       position: fixed;
+       top: 0;
+       left: 0;
+       right: 0;
+       height: 5px;
+       background: $secondary;
+       z-index: 1100;
+       animation-name: load_animation;
+       animation-duration: 6000ms;
+       animation-timing-function: ease-out;
+       transition: opacity 200ms linear;
+       &.fade {
+               opacity: 0;
+       }
+}
+
+@keyframes load_animation {
+       0% { right: 100%; }
+       100% { right: 0%; }
+}

diff --git a/panikweb_templates/static/js/specifics.js b/panikweb_templates/static/js/specifics.js
index 96402f3269dc5d49f496b1ae5b32b0be80f5eb76..2fc125784ba363975dffe254c10babb49f2b8579 100644 (file)
--- a/panikweb_templates/static/js/specifics.js
+++ b/panikweb_templates/static/js/specifics.js
@@ -33,6 +33,7 @@ $(function() {
        };
        var loadPage_request = null;
        afterLoad = function(html, textStatus, XMLHttpRequest) {
+               $('#loading-page').addClass('fade');
                loadPage_request = null;
                if (textStatus == "error") {
                        doLog('Sorry! And error occur when loading page content','error');
@@ -104,6 +105,8 @@ $(function() {
                if (loadPage_request !== null) {
                        loadPage_request.abort();
                }
+               $('#loading-page').remove();
+               $('<div id="loading-page"></div>').prependTo($('#All'));
                loadPage_request = $.ajax({
                        url: href,
                        success: afterLoad,