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 enter image description here loading-bar-spinner enter image description here

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;             };          }); 

demo

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

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -