<!DOCTYPE html>
<html lang="en" ng-app="BlankApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body ng-cloak ng-controller="MainCtrl">
<div aria-label="" layout="column" layout-align="center center">
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Angular Material Progress Button (Loading)</h2>
</div>
</md-toolbar>
<md-content>
<div layout="row" layout-align="center center">
<md-button class="md-raised md-primary md-large-button" ng-click="submit()">
<md-progress-linear ng-if="loading" md-mode="indeterminate"></md-progress-linear>
Click Here
</md-button>
</div>
<section layout="row" layout-align="center center" layout-wrap>
<md-button>
<md-progress-linear ng-if="loading" md-mode="indeterminate"></md-progress-linear>{{title1}}</md-button>
<md-button md-no-ink class="md-primary">
<md-progress-linear ng-if="loading" md-mode="indeterminate"></md-progress-linear>Primary (md-noink)</md-button>
<md-button ng-disabled="true" class="md-primary">
<md-progress-linear ng-if="loading" md-mode="indeterminate"></md-progress-linear>Disabled</md-button>
<md-button class="md-warn">
<md-progress-linear ng-if="loading" md-mode="indeterminate"></md-progress-linear>{{title4}}</md-button>
</section>
<section layout="row" layout-align="center center" layout-wrap>
<md-button class="md-raised">
<md-progress-linear ng-if="loading" md-mode="indeterminate"></md-progress-linear>Button</md-button>
<md-button class="md-raised md-primary">
<md-progress-linear ng-if="loading" md-mode="indeterminate"></md-progress-linear>Primary</md-button>
<md-button ng-disabled="true" class="md-raised md-primary">
<md-progress-linear ng-if="loading" md-mode="indeterminate"></md-progress-linear>Disabled</md-button>
<md-button class="md-raised md-warn">
<md-progress-linear ng-if="loading" md-mode="indeterminate"></md-progress-linear>Warn</md-button>
</section>
</md-content>
</div>
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
<script src="app.js"></script>
</body>
</html>
# Angular Material Progress Button (Loading)
[jQuery2DotNet](http://www.jquery2dotnet.com/)
var app = angular.module('BlankApp', ['ngMaterial']);
app.controller('MainCtrl', function($scope, $timeout) {
$scope.loading = false;
$scope.title1 = 'Button';
$scope.title4 = 'Warn';
$scope.isDisabled = true;
$scope.stopLoading = function() {
$timeout(function() {
$scope.loading = false;
}, 5000);
};
$scope.submit = function() {
$scope.loading = true;
$scope.stopLoading();
};
});
.md-button {
padding: 0px;
}
.md-large-button {
width: 150px;
}
md-progress-linear {
position: absolute;
}