An Angular directive based on the jQuery plugin that recreates the Material Design pre-loader (as seen on inbox).
bower install angular-material-preloader --save
This package depends on the Material-Preloader jQuery plugin to work. Include it from the bower_components folder in this package or download it from here and include it yourself.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="/bower_components/bower_components/Material-Preloader/js/materialPreloader.js"></script>
<script src="/bower_components/preloader.js"></script>
Inject the module into your angular app as a dependency:
angular.module('yourAppModule', ['ng-material-preloader']);
Use it in your application by passing in the options using element attributes
<div ng-material-preloader="{position: 'top',
height: '5px',
col_1: '#159756',
col_2: '#da4733',
col_3: '#3b78e7',
col_4: '#fdba2c',
fadeIn: 200,
fadeOut: 200}">
</div>
This AngularJS plugin is based on the jQuery Material-Preloader plugin by Aaron Lumsden.
Made with love in Dhaka, Bangladesh by Riyadh Al Nur