From d2bd8f8d11144e4297403405274cabe48a0b4561 Mon Sep 17 00:00:00 2001 From: AvinashKumarG Date: Mon, 18 Apr 2016 19:20:30 +0530 Subject: [PATCH] loading bar --- 0 | 0 app/scripts/loader.js | 7 ++- app/scripts/mifosX.js | 2 +- app/scripts/mifosXStyles.js | 3 +- app/styles/loading-bar.css | 110 ++++++++++++++++++++++++++++++++++++ bower.json | 3 +- 6 files changed, 120 insertions(+), 5 deletions(-) create mode 100644 0 create mode 100644 app/styles/loading-bar.css diff --git a/0 b/0 new file mode 100644 index 00000000..e69de29b diff --git a/app/scripts/loader.js b/app/scripts/loader.js index f958de19..1c7dc72a 100644 --- a/app/scripts/loader.js +++ b/app/scripts/loader.js @@ -32,7 +32,8 @@ 'Q': '../bower_components/q/q', 'tmh.dynamicLocale': '../bower_components/angular-dynamic-locale/tmhDynamicLocale.min', 'webcam-directive':'../bower_components/webcam-directive/dist/1.1.0/webcam.min', - 'angular-utils-pagination':'../bower_components/angular-utils-pagination/dirPagination' + 'angular-utils-pagination':'../bower_components/angular-utils-pagination/dirPagination', + 'angular-loading-bar':'../bower_components/angular-loading-bar/build/loading-bar' }, shim: { 'angular': { deps: ['jquery','chosen.jquery.min'],exports: 'angular' }, @@ -62,6 +63,7 @@ 'tmh.dynamicLocale': {deps: ['angular']}, 'webcam-directive': {deps: ['angular']}, 'angular-utils-pagination': {deps: ['angular']}, + 'angular-loading-bar': {deps: ['angular']}, 'mifosX': { deps: [ 'angular', @@ -89,7 +91,8 @@ 'Q', 'tmh.dynamicLocale', 'webcam-directive', - 'angular-utils-pagination' + 'angular-utils-pagination', + 'angular-loading-bar' ], exports: 'mifosX' } diff --git a/app/scripts/mifosX.js b/app/scripts/mifosX.js index 1252a130..681e6684 100644 --- a/app/scripts/mifosX.js +++ b/app/scripts/mifosX.js @@ -2,7 +2,7 @@ var mifosX = (function (module) { module.ng = { config: angular.module('config_params', ['configurations']), services: angular.module('MifosX_Services', ['ngResource']), - application: angular.module('MifosX_Application', ['MifosX_Services', 'config_params', 'webStorageModule', 'ui.bootstrap' , 'pascalprecht.translate', 'nvd3ChartDirectives', 'notificationWidget', 'angularFileUpload', 'modified.datepicker', 'ngRoute', 'ngSanitize', 'LocalStorageModule', 'ngIdle', 'ngCsv', 'frAngular', 'tmh.dynamicLocale', 'webcam', 'angularUtils.directives.dirPagination']) + application: angular.module('MifosX_Application', ['MifosX_Services', 'config_params', 'webStorageModule', 'ui.bootstrap' , 'pascalprecht.translate', 'nvd3ChartDirectives', 'notificationWidget', 'angularFileUpload', 'modified.datepicker', 'ngRoute', 'ngSanitize', 'LocalStorageModule', 'ngIdle', 'ngCsv', 'frAngular', 'tmh.dynamicLocale', 'webcam', 'angularUtils.directives.dirPagination', 'angular-loading-bar']) }; return module; }(mifosX || {})); diff --git a/app/scripts/mifosXStyles.js b/app/scripts/mifosXStyles.js index 825c7840..9d65f5a9 100644 --- a/app/scripts/mifosXStyles.js +++ b/app/scripts/mifosXStyles.js @@ -8,7 +8,8 @@ define(['underscore'], function () { 'app', 'nv.d3', 'style', - 'chosen.min' + 'chosen.min', + 'loading-bar' ] }; diff --git a/app/styles/loading-bar.css b/app/styles/loading-bar.css new file mode 100644 index 00000000..f0817dc4 --- /dev/null +++ b/app/styles/loading-bar.css @@ -0,0 +1,110 @@ +/*! + * angular-loading-bar v0.9.0 + * https://chieffancypants.github.io/angular-loading-bar + * Copyright (c) 2016 Wes Cruver + * License: MIT + */ + +/* Make clicks pass-through */ +#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 { + -webkit-transition: width 350ms; + -moz-transition: width 350ms; + -o-transition: width 350ms; + transition: width 350ms; + + background: #FF8C00; + 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: #29d 1px 0 6px 1px; + -ms-box-shadow: #29d 1px 0 6px 1px; + -webkit-box-shadow: #29d 1px 0 6px 1px; + box-shadow: #29d 1px 0 6px 1px; + -moz-border-radius: 100%; + -webkit-border-radius: 100%; + border-radius: 100%; +} + +#loading-bar-spinner { + display: block; + position: fixed; + z-index: 10002; + top: 50%; + left: 50%; +} + +#loading-bar-spinner .spinner-icon { + width: 34px; + height: 34px; + + border: solid 2px transparent; + border-top-color: #29d; + border-left-color: #29d; + 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); } +} +@-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/bower.json b/bower.json index bcfae1cd..25ff01d5 100644 --- a/bower.json +++ b/bower.json @@ -26,7 +26,8 @@ "q": "v1.0.1", "angular-dynamic-locale": "", "webcam-directive": "1.1.0", - "angular-utils-pagination": "~0.5.0" + "angular-utils-pagination": "~0.5.0", + "angular-loading-bar":"0.9.0" }, "devDependencies": { "jasmine": "1.3.1"