├── .gitignore ├── LICENSE ├── README.md ├── angular-loading-feedback.css ├── angular-loading-feedback.js ├── bower.json └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | /bower_components 2 | /node_modules 3 | .bowerrc 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Marcos Florencio 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # angular-loading-feedback 2 | 3 | # Install 4 | 5 | ## Bower 6 | `bower install angular-loading-feedback` 7 | 8 | ## Or 9 | [Download](http://github.com/marcosflorencio/angular-loading-feedback/zipball/master/) files and import the files in your index. 10 | 11 | ```html 12 | 13 | ``` 14 | 15 | ```html 16 | 17 | ``` 18 | 19 | Declare a dependency on principal module 20 | ```javascript 21 | angular.module('myModule', ['angular-loading-feedback']); 22 | ``` 23 | 24 | # Usage 25 | In your index declare the directive 26 | 27 | ```html 28 | 29 | ``` 30 | 31 | #### Style options 32 | 33 | * loading-message: _(default: null)_ message appears during the loading. 34 | 35 | * bg-color: _(default: #f2f2f2)_ background color 36 | 37 | * text-color: _(default: #7f8c8d)_ text and loading symbol color 38 | 39 | Example: 40 | 41 | ```html 42 | 43 | ``` 44 | #### Ignoring the loading 45 | 46 | **For ignore loading (dont display modal) in case of autocomplete/type a head use the attribute directive:** `loading-feedback-ignore` in the input. 47 | 48 | Example: 49 | 50 | ```html 51 | 52 | ``` 53 | 54 | ## Live-demo 55 | https://plnkr.co/edit/DYksypT1c7d0T2iKEGka?p=preview 56 | 57 | 58 | ## Demo: 59 | 60 | _(Default settings)_ 61 | 62 | ![alt tag](http://i.giphy.com/26AHEJJBoYHmPaQGA.gif) 63 | -------------------------------------------------------------------------------- /angular-loading-feedback.css: -------------------------------------------------------------------------------- 1 | .angular-loadind-feedback-modal { 2 | position: fixed; 3 | top: 0; 4 | right: 0; 5 | bottom: 0; 6 | left: 0; 7 | background-color: #f2f2f2; 8 | z-index: 99999; 9 | opacity: 0; 10 | -webkit-transition: opacity 200ms ease-in; 11 | -moz-transition: opacity 200ms ease-in; 12 | transition: opacity 200ms ease-in; 13 | pointer-events: none; 14 | opacity: 1; 15 | pointer-events: auto; 16 | } 17 | 18 | .angular-loadind-feedback-signal { 19 | position: absolute; 20 | top: 50%; 21 | border: 5px solid #7f8c8d; 22 | border-radius: 30px; 23 | height: 30px; 24 | margin: -15px 0 0 10px; 25 | opacity: 0; 26 | width: 30px; 27 | animation: pulsate 1s ease-out; 28 | animation-iteration-count: infinite; 29 | } 30 | 31 | .angular-loadind-feedback-text { 32 | color: #7f8c8d; 33 | position: fixed; 34 | top: 50%; 35 | left: 50%; 36 | font-weight: bold; 37 | font-size: 24px; 38 | padding-top: 10px; 39 | font-family: sans-serif; 40 | transform: translate(-50%, -50%); 41 | } 42 | 43 | @keyframes pulsate { 44 | 0% { 45 | transform: scale(.1); 46 | opacity: 0.0; 47 | } 48 | 50% { 49 | opacity: 1; 50 | } 51 | 100% { 52 | transform: scale(1.2); 53 | opacity: 0; 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /angular-loading-feedback.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Basic loading for requisitions in angulars apps 3 | * in construction :) 4 | * Thanks for the loading css @brunjo - http://codepen.io/brunjo/pen/vELmaP 5 | */ 6 | (function(){ 7 | 'use strict'; 8 | angular 9 | .module('angular-loading-feedback', []) 10 | .directive('loadingFeedback', loadingFeedback) 11 | .directive('loadingFeedbackIgnore', loadingFeedbackIgnore) 12 | .factory('loadingFactory', loadingFactory) 13 | .config(config) 14 | .run(run); 15 | 16 | run.$inject = ['$templateCache']; 17 | function run($templateCache){ 18 | $templateCache 19 | .put('angular-loading-feedback.modal.template.html', 20 | '
' 21 | + '

' 22 | + ' {{loadingMessage}}' 23 | + '

' 24 | + '
'); 25 | }; 26 | 27 | config.$inject = ['$provide', '$httpProvider']; 28 | function config($provide, $httpProvider) { 29 | $provide.factory('LoadindFeedBackInterceptor', LoadindFeedBackInterceptor); 30 | 31 | LoadindFeedBackInterceptor.$inject = ['$q', '$rootScope']; 32 | function LoadindFeedBackInterceptor($q, $rootScope) { 33 | var interceptor = { 34 | request: onRequest, 35 | response: onResponse, 36 | requestError: onRequestError, 37 | responseError: onResponseError 38 | }, 39 | requestList = []; 40 | return interceptor; 41 | 42 | function onRequest(config){ 43 | openLoading(config.url); 44 | return config; 45 | }; 46 | 47 | function onResponse(response) { 48 | closeLoading(response.config.url); 49 | return response; 50 | }; 51 | 52 | function onRequestError(rejection) { 53 | closeLoading(rejection.config.url); 54 | return $q.reject(rejection); 55 | }; 56 | 57 | function onResponseError(rejection) { 58 | closeLoading(rejection.config.url); 59 | return $q.reject(rejection); 60 | }; 61 | 62 | function openLoading(urlConfig){ 63 | requestList.push(urlConfig); 64 | $rootScope.$emit('OpenLoadindEvent'); 65 | }; 66 | 67 | function closeLoading(urlConfig){ 68 | var index = requestList.indexOf(urlConfig); 69 | requestList.splice(index, 1); 70 | if (requestList.length == 0) 71 | $rootScope.$emit('CloseLoadingEvent'); 72 | }; 73 | }; 74 | $httpProvider.interceptors.push('LoadindFeedBackInterceptor'); 75 | }; 76 | 77 | loadingFeedback.$inject = ['$rootScope', 'loadingFactory']; 78 | function loadingFeedback($rootScope, loadingFactory){ 79 | var directive = { 80 | restrict: 'E', 81 | scope:{ 82 | loadingMessage: '@' 83 | , bgColor: '@' 84 | , textColor: '@' 85 | }, 86 | templateUrl: 'angular-loading-feedback.modal.template.html', 87 | link: link 88 | }; 89 | 90 | return directive; 91 | 92 | function link(scope, element, attrs) { 93 | scope.ativeLoading = false; 94 | scope.setColorConfig = setColorConfig; 95 | $rootScope.$on('OpenLoadindEvent', showThis); 96 | $rootScope.$on('CloseLoadingEvent', hideThis); 97 | 98 | function setColorConfig(){ 99 | var modalElement = getElement('.angular-loadind-feedback-modal') 100 | , textElement = getElement('.angular-loadind-feedback-text') 101 | , signalElement = getElement('.angular-loadind-feedback-signal') 102 | 103 | modalElement.css('background-color', scope.bgColor); 104 | textElement.css('color', scope.textColor); 105 | signalElement.css('border', '5px solid ' + scope.textColor); 106 | }; 107 | 108 | function getElement(selector){ 109 | return angular.element(document.querySelector(selector)); 110 | }; 111 | 112 | function showThis(){ 113 | if (!loadingFactory.getLoadingIgnore()) 114 | scope.ativeLoading = true; 115 | }; 116 | 117 | function hideThis(){ 118 | scope.ativeLoading = false; 119 | }; 120 | }; 121 | }; 122 | 123 | loadingFeedbackIgnore.$inject = ['loadingFactory']; 124 | function loadingFeedbackIgnore(loadingFactory){ 125 | var directive = { 126 | priority: 1, 127 | restrict: 'A', 128 | link: link, 129 | scope: {} 130 | }; 131 | return directive; 132 | 133 | function link(scope, element, attrs) { 134 | element.bind('focus', function(){ 135 | loadingFactory.setLoadingIgnore(true); 136 | }); 137 | 138 | element.bind('blur', function(){ 139 | loadingFactory.setLoadingIgnore(false); 140 | }); 141 | }; 142 | }; 143 | 144 | function loadingFactory(){ 145 | var factory = { 146 | setLoadingIgnore : setLoadingIgnore, 147 | getLoadingIgnore : getLoadingIgnore 148 | } 149 | , loadingIgnored = false; 150 | return factory; 151 | 152 | function setLoadingIgnore(status){ 153 | loadingIgnored = status; 154 | }; 155 | 156 | function getLoadingIgnore(){ 157 | return loadingIgnored; 158 | }; 159 | }; 160 | }()); -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-loading-feedback", 3 | "version": "0.0.3", 4 | "homepage": "https://github.com/marcosflorencio/angular-loading-feedback", 5 | "authors": [ 6 | "marcos.florencio " 7 | ], 8 | "description": "Angular directive to indicate loads in app", 9 | "main": [ 10 | "./angular-loading-feedback.js", 11 | "./angular-loading-feedback.css" 12 | ], 13 | "keywords": [ 14 | "angularjs", 15 | "angular", 16 | "javascript", 17 | "loading", 18 | "angularloading" 19 | ], 20 | "license": "MIT", 21 | "ignore": [ 22 | "**/.*", 23 | "node_modules", 24 | "bower_components", 25 | "test", 26 | "tests" 27 | ], 28 | "dependencies": { 29 | "angular": "~1.5.6" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-loading-feedback", 3 | "version": "0.0.3", 4 | "main": "angular-loading-feedback.js", 5 | "scripts": { 6 | "test": "echo \"Error: no test specified\" && exit 1" 7 | }, 8 | "repository": { 9 | "type": "git", 10 | "url": "git+https://github.com/marcosflorencio/angular-loading-feedback.git" 11 | }, 12 | "keywords": [ 13 | "angular", 14 | "angular-loading", 15 | "loading", 16 | "feedback" 17 | ], 18 | "author": "marcosflorencio", 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/marcosflorencio/angular-loading-feedback/issues" 22 | }, 23 | "homepage": "https://github.com/marcosflorencio/angular-loading-feedback#readme" 24 | } 25 | --------------------------------------------------------------------------------