From ee63c06d74967ee92ccd9368311468f61e2e586a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Franck=20Arag=C3=A3o?= Date: Fri, 10 Feb 2017 13:40:47 -0300 Subject: [PATCH] loading bar ok --- dist/css/styles.min.css | 2 +- dist/index.html | 2 +- dist/js/bundle.js | 6 +- src/app/util/aqt.config.load-bar.js | 6 +- src/assets/css/aqtApp.css | 130 ++++++++++++++++++++++++++-- src/index.html | 2 +- 6 files changed, 131 insertions(+), 17 deletions(-) diff --git a/dist/css/styles.min.css b/dist/css/styles.min.css index 91f7779..acb97a3 100755 --- a/dist/css/styles.min.css +++ b/dist/css/styles.min.css @@ -1,4 +1,4 @@ -@media only screen and (min-width:732px){main{position:absolute;height:75%;width:75%;top:10%;left:10%}}h4,h5{font-size:25px;font-variant:inherit;line-height:46px;text-decoration:none;color:rgba(68,68,68,.56);font-weight:300;letter-spacing:1.8px}body{background:#fff}span.badge{float:left!important;margin-left:2px!important}nav .brand-logo.center{left:45%!important}@media only screen and (min-width:601px){.row .col.m6{width:100%!important}}.card-action{padding:10px!important;margin-top:10px!important}.card-action a{color:#0097a7!important}.card-subtitle{padding-top:6px!important}.row:after{content:none!important}.card .card-content .card-title{line-height:19px!important}.card .card-title{margin-top:5px;margin-bottom:5px;font-size:1.3em!important;letter-spacing:1.2px!important}.CodeMirror,.CodeMirror .CodeMirror-scroll{min-height:150px!important}.editor-toolbar{border-top-left-radius:0!important;border-top-right-radius:0!important}.page.ng-leave{z-index:9999}.page.ng-enter{z-index:8888}.page-transation.ng-leave{-webkit-animation:slideOutLeft .5s both ease-in;-moz-animation:slideOutLeft .5s both ease-in;animation:slideOutLeft .5s both ease-in}.page-transation.ng-enter{-webkit-animation:slideInRight .5s both ease-in;-moz-animation:slideInRight .5s both ease-in;animation:slideInRight .5s both ease-in}@-webkit-keyframes rotateFall{0%{-webkit-transform:rotateZ(0)}20%{-webkit-transform:rotateZ(10deg);-webkit-animation-timing-function:ease-out}40%{-webkit-transform:rotateZ(17deg)}60%{-webkit-transform:rotateZ(16deg)}100%{-webkit-transform:translateY(100%) rotateZ(17deg)}}@-moz-keyframes rotateFall{0%{-moz-transform:rotateZ(0)}20%{-moz-transform:rotateZ(10deg);-moz-animation-timing-function:ease-out}40%{-moz-transform:rotateZ(17deg)}60%{-moz-transform:rotateZ(16deg)}100%{-moz-transform:translateY(100%) rotateZ(17deg)}}@keyframes rotateFall{0%{transform:rotateZ(0)}20%{transform:rotateZ(10deg);animation-timing-function:ease-out}40%{transform:rotateZ(17deg)}60%{transform:rotateZ(16deg)}100%{transform:translateY(100%) rotateZ(17deg)}}@keyframes slideInRight{from{transform:translateX(100%)}to{transform:translateX(0)}}@-moz-keyframes slideInRight{from{-moz-transform:translateX(100%)}to{-moz-transform:translateX(0)}}@-webkit-keyframes slideInRight{from{-webkit-transform:translateX(100%)}to{-webkit-transform:translateX(0)}}@keyframes slideInUp{from{transform:translateY(100%)}to{transform:translateY(0)}}@-moz-keyframes slideInUp{from{-moz-transform:translateY(100%)}to{-moz-transform:translateY(0)}}@-webkit-keyframes slideInUp{from{-webkit-transform:translateY(100%)}to{-webkit-transform:translateY(0)}}@keyframes slideOutLeft{to{transform:translateX(-100%)}}@-moz-keyframes slideOutLeft{to{-moz-transform:translateX(-100%)}}@-webkit-keyframes slideOutLeft{to{-webkit-transform:translateX(-100%)}}#loading-bar .bar{background:#2c3e50}#loading-bar-spinner .spinner-icon{border-top-color:#2c3e50;border-left-color:#2c3e50}#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} +@media only screen and (min-width:732px){main{position:absolute;height:75%;width:75%;top:10%;left:10%}}h4,h5{font-size:25px;font-variant:inherit;line-height:46px;text-decoration:none;color:rgba(68,68,68,.56);font-weight:300;letter-spacing:1.8px}body{background:#fff}span.badge{float:left!important;margin-left:2px!important}nav .brand-logo.center{left:45%!important}@media only screen and (min-width:601px){.row .col.m6{width:100%!important}}.card-action{padding:10px!important;margin-top:10px!important}.card-action a{color:#0097a7!important}.card-subtitle{padding-top:6px!important}.row:after{content:none!important}.card .card-content .card-title{line-height:19px!important}.card .card-title{margin-top:5px;margin-bottom:5px;font-size:1.3em!important;letter-spacing:1.2px!important}.CodeMirror,.CodeMirror .CodeMirror-scroll{min-height:150px!important}.editor-toolbar{border-top-left-radius:0!important;border-top-right-radius:0!important}.modal.bottom-sheet{max-height:60%!important}.page.ng-leave{z-index:9999}.page.ng-enter{z-index:8888}.page-transation.ng-leave{-webkit-animation:slideOutLeft .5s both ease-in;-moz-animation:slideOutLeft .5s both ease-in;animation:slideOutLeft .5s both ease-in}.page-transation.ng-enter{-webkit-animation:slideInRight .5s both ease-in;-moz-animation:slideInRight .5s both ease-in;animation:slideInRight .5s both ease-in}@-webkit-keyframes rotateFall{0%{-webkit-transform:rotateZ(0)}20%{-webkit-transform:rotateZ(10deg);-webkit-animation-timing-function:ease-out}40%{-webkit-transform:rotateZ(17deg)}60%{-webkit-transform:rotateZ(16deg)}100%{-webkit-transform:translateY(100%) rotateZ(17deg)}}@-moz-keyframes rotateFall{0%{-moz-transform:rotateZ(0)}20%{-moz-transform:rotateZ(10deg);-moz-animation-timing-function:ease-out}40%{-moz-transform:rotateZ(17deg)}60%{-moz-transform:rotateZ(16deg)}100%{-moz-transform:translateY(100%) rotateZ(17deg)}}@keyframes rotateFall{0%{transform:rotateZ(0)}20%{transform:rotateZ(10deg);animation-timing-function:ease-out}40%{transform:rotateZ(17deg)}60%{transform:rotateZ(16deg)}100%{transform:translateY(100%) rotateZ(17deg)}}@keyframes slideInRight{from{transform:translateX(100%)}to{transform:translateX(0)}}@-moz-keyframes slideInRight{from{-moz-transform:translateX(100%)}to{-moz-transform:translateX(0)}}@-webkit-keyframes slideInRight{from{-webkit-transform:translateX(100%)}to{-webkit-transform:translateX(0)}}@keyframes slideInUp{from{transform:translateY(100%)}to{transform:translateY(0)}}@-moz-keyframes slideInUp{from{-moz-transform:translateY(100%)}to{-moz-transform:translateY(0)}}@-webkit-keyframes slideInUp{from{-webkit-transform:translateY(100%)}to{-webkit-transform:translateY(0)}}@keyframes slideOutLeft{to{transform:translateX(-100%)}}@-moz-keyframes slideOutLeft{to{-moz-transform:translateX(-100%)}}@-webkit-keyframes slideOutLeft{to{-webkit-transform:translateX(-100%)}}#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-spinner.ng-enter,#loading-bar-spinner.ng-leave.ng-leave-active,#loading-bar.ng-enter,#loading-bar.ng-leave.ng-leave-active{opacity:0}#loading-bar-spinner.ng-enter.ng-enter-active,#loading-bar-spinner.ng-leave,#loading-bar.ng-enter.ng-enter-active,#loading-bar.ng-leave{opacity:1}#loading-bar .bar{-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}#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{width:14px;height:14px;border:2px solid transparent;border-top-color:#f9a825!important;border-left-color:#f9a825!important;border-radius:50%;-webkit-animation:loading-bar-spinner .4s linear infinite;-moz-animation:loading-bar-spinner .4s linear infinite;-ms-animation:loading-bar-spinner .4s linear infinite;-o-animation:loading-bar-spinner .4s linear infinite;animation:loading-bar-spinner .4s linear infinite}@-webkit-keyframes loading-bar-spinner{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes loading-bar-spinner{0%{-moz-transform:rotate(0);transform:rotate(0)}100%{-moz-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes loading-bar-spinner{0%{-o-transform:rotate(0);transform:rotate(0)}100%{-o-transform:rotate(360deg);transform:rotate(360deg)}}@-ms-keyframes loading-bar-spinner{0%{-ms-transform:rotate(0);transform:rotate(0)}100%{-ms-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loading-bar-spinner{0%{transform:rotate(0)}100%{transform:rotate(360deg)}} /*! * Materialize v0.97.8 (http://materializecss.com) * Copyright 2014-2015 Materialize diff --git a/dist/index.html b/dist/index.html index d45255f..6c22636 100755 --- a/dist/index.html +++ b/dist/index.html @@ -21,9 +21,9 @@ -
+
diff --git a/dist/js/bundle.js b/dist/js/bundle.js index 2dd21a8..572d465 100755 --- 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 = '
'; + cfpLoadingBarProvider.spinnerTemplate = false; + //cfpLoadingBarProvider.spinnerTemplate = '
'; + }]) })(window.angular); (function(angular){ diff --git a/src/app/util/aqt.config.load-bar.js b/src/app/util/aqt.config.load-bar.js index 576e9ba..f4901b2 100644 --- 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 = '
'; + cfpLoadingBarProvider.spinnerTemplate = false; + //cfpLoadingBarProvider.spinnerTemplate = '
'; + }]) diff --git a/src/assets/css/aqtApp.css b/src/assets/css/aqtApp.css index e690dc8..52b34ba 100755 --- 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 index d45255f..6c22636 100755 --- a/src/index.html +++ b/src/index.html @@ -21,9 +21,9 @@ -
+