Angular Busy + Material Preloader + Angular Material to create promise based Angular Busy preloader, see demo: http://plnkr.co/edit/5kQJGSmJ2Tm2ktQkPzb0?p=preview

cgbusy-material.html

<div class="cg-busy-default-wrapper">
    <material-preloader></material-preloader>
</div>

preloader.html

<!-- template for loading the material preloader -->
<div  id='materialPreloader'>
    <div class='load-bar visible' style='height:{{settings.height}};{{settings.position}}:0px'>
        <div class='load-bar-container'>
            <div class='load-bar-base base1' style='background:{{settings.col_1}}
                 '>
                <div class='color red' style='background:{{settings.col_2}}
                     '>
                </div>
                <div class='color blue' style='background:
                     {{settings.col_3}}
                     '>
                </div>
                <div class='color yellow' style='background:
                     {{settings.col_4}}
                     '>
                </div>
                <div class='color green' style='background:
                     {{settings.col_1}}
                     '>
                </div>
            </div>
        </div>
        <div class='load-bar-container'>
            <div class='load-bar-base base2' style='background:{{settings.col_1}}
                 '>
                <div class='color red' style='background:  {{settings.col_2}} 
                     '>
                </div>
                <div class='color blue' style='background: 
                     {{settings.col_3}} 
                     '>
                </div>
                <div class='color yellow' style='background: 
                     {{settings.col_4}} 
                     '>
                </div>
                <div class='color green' style='background: 
                     {{settings.col_1}}  '>
                </div>
            </div>
        </div>
    </div>
</div>

preloader.js

(function () {
  'use strict';

  angular.module('angularMaterialPreloader', [])
    .directive('materialPreloader', function () {
      // Runs during compile
      return {
        restrict: 'EA', // E = Element, A = Attribute
        templateUrl: 'preloader.html',
        transclude: true,
        link: function ($scope, iAttrs) {
          $scope.settings = {
            position: iAttrs.position || 'top',
            height: iAttrs.height || '5px',
            col_1: iAttrs.col1 || '#159756',
            col_2: iAttrs.col2 || '#da4733',
            col_3: iAttrs.col3 || '#3b78e7',
            col_4: iAttrs.col4 || '#fdba2c'
          };
         
        }
      };
    });
})();

someapp.js

angular
.module('sampleApp', [//add dependencies
    'cgBusy',
    'angularMaterialPreloader',
])
.value('cgBusyDefaults', {//configure cgBusy to use Material Preloader template
    backdrop: false,
    templateUrl: 'cgbusy-material.html',
    delay: 200
}).controller('ExampleCntl', function($http, $scope){
  $scope.longPromise = $http.get('http://example.com/some.long.request.php').success(function(){
    console.log('Request completed');
  });
});