diff --git a/packages/oui-tile/README.md b/packages/oui-tile/README.md
index b7c6e39b..fe1c44db 100644
--- a/packages/oui-tile/README.md
+++ b/packages/oui-tile/README.md
@@ -53,6 +53,24 @@
 </oui-tile>
 ```
 
+### Loading state
+
+```html:preview
+<div ng-init="$ctrl.loading = true" class="oui-doc-preview-only-keep-children">
+<button class="oui-button oui-doc-preview-only" type="button"
+    ng-class="{
+        'oui-button_primary': $ctrl.loading,
+        'oui-button_secondary': !$ctrl.loading
+    }"
+    ng-click="$ctrl.loading = !$ctrl.loading">
+    Toggle loading
+</button>
+<oui-tile heading="Title" description="A great legend for this tile." loading="$ctrl.loading">
+    <p>Nulla ac dui a est varius eleifend nec vitae ipsum. Nunc venenatis luctus nisi quis pulvinar. Duis justo massa, mattis nec metus scelerisque, mattis tristique quam. Sed eget neque elementum, facilisis velit eget, iaculis lectus. Quisque at molestie justo. Ut tincidunt augue non tortor tincidunt facilisis. Donec ut lectus a leo porttitor eleifend. Morbi venenatis turpis eu rutrum consectetur. Sed auctor ligula at erat euismod, imperdiet posuere est feugiat. Quisque maximus ultricies risus sed varius.</p>
+</oui-tile>
+</div>
+```
+
 ## API
 
 ### oui-tile
diff --git a/packages/oui-tile/src/tile.html b/packages/oui-tile/src/tile.html
index fe66440d..efa24957 100644
--- a/packages/oui-tile/src/tile.html
+++ b/packages/oui-tile/src/tile.html
@@ -1,5 +1,12 @@
 <div class="oui-tile">
     <h4 class="oui-header_4 oui-tile__title" ng-bind="::$ctrl.heading"></h4>
     <p class="oui-tile__legend" ng-if="!!$ctrl.description" ng-bind="::$ctrl.description"></p>
-    <div class="oui-tile__body" ng-transclude></div>
+    <div class="oui-tile__body"
+        ng-if="!$ctrl.loading"
+        ng-transclude>
+    </div>
+    <div class="oui-tile__loader"
+        ng-if="$ctrl.loading">
+        <oui-spinner size="m"></oui-spinner>
+    </div>
 </div>