add loading bar

diff --git a/panikweb_templates/static/css/_specifics.scss b/panikweb_templates/static/css/_specifics.scss
index 4abb12b0bead7eec9dc5ecac6d3c335c7608a604..bdcdb30133416268a3c0ad8db2b4e422545b7299 100644 (file)
--- a/panikweb_templates/static/css/_specifics.scss
+++ b/panikweb_templates/static/css/_specifics.scss
@@ -2381,3 +2381,25 @@ div#grid table {
        max-width: 1000px;
        margin: 0 auto;
 }
+
+div#loading-page {
+       position: fixed;
+       top: 0;
+       left: 0;
+       right: 0;
+       height: 5px;
+       background: $secondary;
+       z-index: 100;
+       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 9569ab0748fe4c94061b77f8fabd72447e87e72e..d26af6e3b782426ba8a9a8bafb49c518a07cc1f7 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,