Angular Material Layout

by Austin Anderson

HTML

<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<main ng-app="sandbox" flex layout="column" class="col-xs-12" id="view">

<md-content class="loader" layout="row" layout-align="center center" flex>
  <div id="title" flex>
      <span>Loading...</span>
  </div>
  <div class="progress" flex>
    <div flex class="progress-bar progress-bar-striped active" flex role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax=  "100" style="width: 100%">
    </div>
  </div>
</md-content>

</main>

CSS

#view {
  height: 100%;
  width: 100%;
}

.progress {
  max-width: 260px;
}

#title {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  color: black;
  text-align: center;
  font-family: "lato", sans-serif;
  font-weight: 300;
  font-size: 40px;
  letter-spacing: 10px;
  margin-top: -72px;
  padding-left: 10px;
}

JavaScript

angular.module('sandbox', ['ngMaterial']);