Home Ask Login Register

Developers Planet

Your answer is one click away!

Ravi Khambhati 3 weeks ago

Non clickable background with AngularJS loading bar

I am trying to set non-clickable loading bar and everything looks good but I can still click on the button. You can see the same on plnkr.


I checked that both of the bellow div has attribute "pointer-events: none" but its not working.

<!DOCTYPE html>
    <meta charset="utf-8" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.css" rel="stylesheet" />

        #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;


    <div ng-app="LoadingBarExample" ng-controller="ExampleCtrl">
        <button ng-click="startLoading()">startLoading</button>
        <button ng-click="completeLoading()">completeLoading</button>

    <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>

        var LoadingBarExample = angular.module('LoadingBarExample', ['chieffancypants.loadingBar', 'ngAnimate'])
            .config(function (cfpLoadingBarProvider) {


Sajeetharan 3 weeks ago

You can handle this with angularjs way, just add ng-disabled="loading" to make the button disabled and enabled based on the 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 () {
                 $scope.loading =true;

            $scope.completeLoading = function () {
                  $scope.loading =false;




If you want to disable the whole form with a single way, use fieldset instead of div and 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>

Post Status

Asked in 3 weeks ago
Viewed 3,995 times
Voted 5
Answered 1 times


Leave an answer

Quote of the day: live life