diff --git a/ui_framework/doc_site/src/views/icon/icon_example.js b/ui_framework/doc_site/src/views/icon/icon_example.js
index b841d99f4ec45..16028624b03ac 100644
--- a/ui_framework/doc_site/src/views/icon/icon_example.js
+++ b/ui_framework/doc_site/src/views/icon/icon_example.js
@@ -16,6 +16,8 @@ const successHtml = require('./icon_success.html');
const warningHtml = require('./icon_warning.html');
const errorHtml = require('./icon_error.html');
const inactiveHtml = require('./icon_inactive.html');
+const spinnerHtml = require('./icon_spinner.html');
+const spinnerJs = require('raw!./icon_spinner.js');
export default props => (
@@ -134,5 +136,22 @@ export default props => (
html={inactiveHtml}
/>
+
+
+
+ You can use Icons to represent a loading and successfully-loaded state.
+
+
+
+
);
diff --git a/ui_framework/doc_site/src/views/icon/icon_spinner.html b/ui_framework/doc_site/src/views/icon/icon_spinner.html
new file mode 100644
index 0000000000000..06ecc09046b8a
--- /dev/null
+++ b/ui_framework/doc_site/src/views/icon/icon_spinner.html
@@ -0,0 +1,23 @@
+
+
+
diff --git a/ui_framework/doc_site/src/views/icon/icon_spinner.js b/ui_framework/doc_site/src/views/icon/icon_spinner.js
new file mode 100644
index 0000000000000..bc73f19dc907f
--- /dev/null
+++ b/ui_framework/doc_site/src/views/icon/icon_spinner.js
@@ -0,0 +1,19 @@
+/* eslint-disable */
+
+const $loading = $('#loadingDemo');
+const $loaded = $('#loadedDemo');
+let isLoading = true;
+
+$loaded.hide();
+
+setInterval(() => {
+ if (isLoading) {
+ isLoading = false;
+ $loading.hide();
+ $loaded.show();
+ } else {
+ isLoading = true;
+ $loading.show();
+ $loaded.hide();
+ }
+}, 2000);