Add example of spinner Icon. (#11424) (#11425)

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 => (
   <GuidePage title={props.route.name}>
@@ -134,5 +136,22 @@ export default props => (
         html={inactiveHtml}
       />
     </GuideSection>
+
+    <GuideSection
+      title="Spinner"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: spinnerHtml,
+      }]}
+    >
+      <GuideText>
+        You can use Icons to represent a loading and successfully-loaded state.
+      </GuideText>
+
+      <GuideDemo
+        html={spinnerHtml}
+        js={spinnerJs}
+      />
+    </GuideSection>
   </GuidePage>
 );

ui_framework/doc_site/src/views/icon/icon_spinner.html

@@ -0,0 +1,23 @@
+<div class="kuiFieldGroup" id="loadingDemo">
+  <div class="kuiFieldGroupSection">
+    <span class="kuiIcon kuiIcon--basic fa-spinner fa-spin"></span>
+  </div>
+
+  <div class="kuiFieldGroupSection">
+    <p class="kuiText">
+      Loading...
+    </p>
+  </div>
+</div>
+
+<div class="kuiFieldGroup" id="loadedDemo">
+  <div class="kuiFieldGroupSection">
+    <span id="spinnerDemo" class="kuiIcon kuiIcon--success fa-check"></span>
+  </div>
+
+  <div class="kuiFieldGroupSection">
+    <p class="kuiText">
+      Loaded!
+    </p>
+  </div>
+</div>

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);