loading bar ok

AnalyzerQuestions · Feb 10, 2017 · ee63c06 · ee63c06
1 parent f4a4ae7
commit ee63c06
Show file tree

Hide file tree

Showing 6 changed files with 131 additions and 17 deletions.
diff --git a/dist/css/styles.min.css b/dist/css/styles.min.css
diff --git a/dist/index.html b/dist/index.html
@@ -21,9 +21,9 @@
 </head>
 
 <body>
-    <div id="loading-bar-container"></div>
     <nav-bar name="'APP_NAME'"></nav-bar>
     <main>
+        <div id="loading-bar-container"></div>
         <div ng-view class="page-transation"></div>
     </main>
 </body>

diff --git a/dist/js/bundle.js b/dist/js/bundle.js
@@ -285,10 +285,10 @@ angular.module("aqtApp").config(['$translateProvider', function($translateProvid
 (function(angular){
 'use strict';
 angular.module("aqtApp").config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {
-    cfpLoadingBarProvider.includeSpinner = false;
-    // cfpLoadingBarProvider.includeBar = false;
     cfpLoadingBarProvider.parentSelector = '#loading-bar-container';
-    cfpLoadingBarProvider.spinnerTemplate = '<div><span class="fa fa-spinner">Custom Loading Message...</div>';
+    cfpLoadingBarProvider.spinnerTemplate = false;
+    //cfpLoadingBarProvider.spinnerTemplate = '<div id=""><i class="fa fa-refresh fa-spin"></i></div>';
+
 }])
 })(window.angular);
 (function(angular){

diff --git a/src/app/util/aqt.config.load-bar.js b/src/app/util/aqt.config.load-bar.js
@@ -1,6 +1,6 @@
 angular.module("aqtApp").config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {
-    cfpLoadingBarProvider.includeSpinner = false;
-    // cfpLoadingBarProvider.includeBar = false;
     cfpLoadingBarProvider.parentSelector = '#loading-bar-container';
-    cfpLoadingBarProvider.spinnerTemplate = '<div><span class="fa fa-spinner">Custom Loading Message...</div>';
+    cfpLoadingBarProvider.spinnerTemplate = false;
+    //cfpLoadingBarProvider.spinnerTemplate = '<div id=""><i class="fa fa-refresh fa-spin"></i></div>';
+
 }])
diff --git a/src/assets/css/aqtApp.css b/src/assets/css/aqtApp.css
@@ -80,6 +80,11 @@
       border-top-left-radius: 0px !important;
       border-top-right-radius: 0px !important;
   }
+  /*MODAL*/
+
+  .modal.bottom-sheet {
+      max-height: 60% !important;
+  }
   /*NG ANIMATE*/
 
   .page.ng-leave {
@@ -236,18 +241,127 @@
   }
   /*Loader bar*/
 
+  #loading-bar, #loading-bar-spinner {
+      pointer-events: none;
+      -webkit-pointer-events: none;
+      -webkit-transition: 350ms linear all;
+      -moz-transition: 350ms linear all;
+      -o-transition: 350ms linear all;
+      transition: 350ms linear all;
+  }
+
+  #loading-bar.ng-enter, #loading-bar.ng-leave.ng-leave-active, #loading-bar-spinner.ng-enter, #loading-bar-spinner.ng-leave.ng-leave-active {
+      opacity: 0;
+  }
+
+  #loading-bar.ng-enter.ng-enter-active, #loading-bar.ng-leave, #loading-bar-spinner.ng-enter.ng-enter-active, #loading-bar-spinner.ng-leave {
+      opacity: 1;
+  }
+
   #loading-bar .bar {
-      background: #2c3e50;
+      -webkit-transition: width 350ms;
+      -moz-transition: width 350ms;
+      -o-transition: width 350ms;
+      transition: width 350ms;
+      background: #f9a825 !important;
+      position: fixed;
+      z-index: 10002;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 2px;
+      border-bottom-right-radius: 1px;
+      border-top-right-radius: 1px;
+  }
+  /* Fancy blur effect */
+
+  #loading-bar .peg {
+      position: absolute;
+      width: 70px;
+      right: 0;
+      top: 0;
+      height: 2px;
+      opacity: .45;
+      -moz-box-shadow: #f9a825 1px 0 6px 1px !important;
+      -ms-box-shadow: #f9a825 1px 0 6px 1px !important;
+      -webkit-box-shadow: #f9a825 1px 0 6px 1px !important;
+      box-shadow: #f9a825 1px 0 6px 1px !important;
+      -moz-border-radius: 100%;
+      -webkit-border-radius: 100%;
+      border-radius: 100%;
+  }
+
+  #loading-bar-spinner {
+      display: block;
+      position: fixed;
+      z-index: 10002;
+      top: 10px;
+      left: 10px;
   }
 
   #loading-bar-spinner .spinner-icon {
-      border-top-color: #2c3e50;
-      border-left-color: #2c3e50;
+      width: 14px;
+      height: 14px;
+      border: solid 2px transparent;
+      border-top-color: #f9a825 !important;
+      border-left-color: #f9a825 !important;
+      border-radius: 50%;
+      -webkit-animation: loading-bar-spinner 400ms linear infinite;
+      -moz-animation: loading-bar-spinner 400ms linear infinite;
+      -ms-animation: loading-bar-spinner 400ms linear infinite;
+      -o-animation: loading-bar-spinner 400ms linear infinite;
+      animation: loading-bar-spinner 400ms linear infinite;
+  }
+
+  @-webkit-keyframes loading-bar-spinner {
+      0% {
+          -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+      }
+      100% {
+          -webkit-transform: rotate(360deg);
+          transform: rotate(360deg);
+      }
   }
 
-  #loading-bar .peg {
-      -moz-box-shadow: #2c3e50 1px 0 6px 1px;
-      -ms-box-shadow: #2c3e50 1px 0 6px 1px;
-      -webkit-box-shadow: #2c3e50 1px 0 6px 1px;
-      box-shadow: #2c3e50 1px 0 6px 1px;
+  @-moz-keyframes loading-bar-spinner {
+      0% {
+          -moz-transform: rotate(0deg);
+          transform: rotate(0deg);
+      }
+      100% {
+          -moz-transform: rotate(360deg);
+          transform: rotate(360deg);
+      }
+  }
+
+  @-o-keyframes loading-bar-spinner {
+      0% {
+          -o-transform: rotate(0deg);
+          transform: rotate(0deg);
+      }
+      100% {
+          -o-transform: rotate(360deg);
+          transform: rotate(360deg);
+      }
+  }
+
+  @-ms-keyframes loading-bar-spinner {
+      0% {
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+      }
+      100% {
+          -ms-transform: rotate(360deg);
+          transform: rotate(360deg);
+      }
+  }
+
+  @keyframes loading-bar-spinner {
+      0% {
+          transform: rotate(0deg);
+      }
+      100% {
+          transform: rotate(360deg);
+      }
   }
diff --git a/src/index.html b/src/index.html
@@ -21,9 +21,9 @@
 </head>
 
 <body>
-    <div id="loading-bar-container"></div>
     <nav-bar name="'APP_NAME'"></nav-bar>
     <main>
+        <div id="loading-bar-container"></div>
         <div ng-view class="page-transation"></div>
     </main>
 </body>