css - Non clickable background with AngularJS loading bar -
i trying set non-clickable loading bar , looks can still click on button. can see same on plnkr.
https://plnkr.co/edit/4eh6ibg45jnlb6qyktxn?p=preview
i checked both of bellow div has attribute "pointer-events: none" not working.
<!doctype html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <link href="https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.css" rel="stylesheet" /> <style> #loading-bar { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.2); z-index: 11002; } #loading-bar-spinner { display: block; position: fixed; z-index: 11002; top: 50%; left: 50%; margin-left: -15px; margin-right: -15px; } </style> <div ng-app="loadingbarexample" ng-controller="examplectrl"> <button ng-click="startloading()">startloading</button> <button ng-click="completeloading()">completeloading</button> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-animate.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.js"></script> <script> var loadingbarexample = angular.module('loadingbarexample', ['chieffancypants.loadingbar', 'nganimate']) .config(function (cfploadingbarprovider) { //cfploadingbarprovider.includespinner = false; //cfploadingbarprovider.includebar = false; // //cfploadingbarprovider.spinnertemplate = '<div><span class="fa fa-spinner">loading...</div>'; // //cfploadingbarprovider.parentselector = '#loading-bar-container'; // //cfploadingbarprovider.spinnertemplate = '<div><span class="fa fa-spinner">custom loading message...</div>'; }); loadingbarexample.controller('examplectrl', function ($scope, $http, $timeout, cfploadingbar) { $scope.startloading = function () { cfploadingbar.start(); }; $scope.completeloading = function () { cfploadingbar.complete(); }; }); </script> </body> </html> loading-bar 
loading-bar-spinner 
you can handle angularjs way, add ng-disabled="loading" make button disabled , enabled based on loading value
<button ng-disabled="loading" ng-click="startloading()">startloading</button> <button ng-disabled="loading" ng-click="completeloading()">completeloading</button> and controller as,
loadingbarexample.controller('examplectrl', function ($scope, $http, $timeout, cfploadingbar) { $scope.loading = false; $scope.startloading = function () { cfploadingbar.start(); $scope.loading =true; }; $scope.completeloading = function () { cfploadingbar.complete(); $scope.loading =false; }; }); edit
if want disable whole form single way, use fieldset instead of div , use ng-disabled
<fieldset ng-disabled="loading" ng-app="loadingbarexample" ng-controller="examplectrl"> <button ng-click="startloading()">startloading</button> <button ng-click="completeloading()">completeloading</button> </fieldset> 
Comments
Post a Comment