How to use angular-materialPreloader ?

Add the following code to the <head> of your document.

<link href="css/materialPreloader.min.css" rel="stylesheet prefetch">
<script type="text/javascript" src="js/angular-Material-Preloader.min.js"></script>

Add angularMaterialPreloader dependency to your module

angular.module("app", ["angularMaterialPreloader"])

Include <div material-preloader ></div> directive in your html template.

//material-preloader as attribute
<div material-preloader position="top" height="5px" col1='#159756' col2='#da4733' col3='#3b78e7' col4='#fdba2c' ></div>

Or Include <material-preloader ></material-preloader> directive as element in your html template.

// material-preloader as element
<material-preloader position="top" height="5px" col1='#159756' col2='#da4733' col3='#3b78e7' col4='#fdba2c' ></material-preloader>

Variable

// Use true or false to on/off the materialpreloader.
$scope.materialPreloader = true/false;

Options

attribute	Required	Description	Options	Default
position	No	Position to place the preloader	top/bottom	top
height	No	The height of the preloader bar	any length	5px
col1	No	Color 1 option	any color	#159756
col2	No	Color 2 option	any color	#da4733
col3	No	Color 3 option	any color	#3b78e7
col4	No	Color 4 option	any color	#fdba2c