Adding a placeholder content block loading animation.

src-docs/src/views/loading/loading_content.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { EuiLoadingContent } from '../../../../src/components/loading';
+
+export default () => (
+  <div>
+    <EuiLoadingContent lines={3} />
+  </div>
+);

src-docs/src/views/loading/loading_example.js

@@ -10,6 +10,7 @@ import {
   EuiLoadingKibana,
   EuiLoadingSpinner,
   EuiLoadingChart,
+  EuiLoadingContent,
 } from '../../../../src/components';
 
 import LoadingKibana from './loading_kibana';
@@ -24,6 +25,10 @@ import LoadingSpinner from './loading_spinner';
 const loadingSpinnerSource = require('!!raw-loader!./loading_spinner');
 const loadingSpinnerHtml = renderToHtml(LoadingSpinner);
 
+import LoadingContent from './loading_content';
+const loadingContentSource = require('!!raw-loader!./loading_content');
+const loadingContentHtml = renderToHtml(LoadingContent);
+
 export const LoadingExample = {
   title: 'Loading',
   sections: [{
@@ -80,5 +85,20 @@ export const LoadingExample = {
     props: { EuiLoadingSpinner },
     demo: <LoadingSpinner />,
     snippet: `<EuiLoadingSpinner size="m" />`
+  }, {
+    title: 'Content',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: loadingContentSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: loadingContentHtml,
+    }],
+    text: (
+      <p>A simple loading animation for displaying placeholder content. You can pass in a number of lines — the default is 3.</p>
+    ),
+    props: { EuiLoadingContent },
+    demo: <LoadingContent />,
+    snippet: `<EuiLoadingContent lines={3} />`
   }],
 };

src/components/index.js

@@ -200,6 +200,7 @@ export {
 export {
   EuiLoadingKibana,
   EuiLoadingChart,
+  EuiLoadingContent,
   EuiLoadingSpinner,
 } from './loading';
 

src/components/loading/_index.scss

@@ -1,4 +1,5 @@
 @import 'mixins';
 @import 'loading_kibana';
 @import 'loading_chart';
+@import 'loading_content';
 @import 'loading_spinner';

src/components/loading/_loading_content.scss

@@ -0,0 +1,20 @@
+.euiLoadingContent__loader {
+  width: 100%;
+}
+
+.euiLoadingContent__single-line {
+  width: 100%;
+  fill:shadeOrTint($euiColorLightShade, 0%, 15%);
+  &:last-child {
+    width: 75%;
+  }
+}
+
+.euiLoadingContent__gradient--start-end {
+  stop-color: shadeOrTint($euiColorLightShade, 0%, 15%);
+  stop-opacity: 1;
+}
+.euiLoadingContent__gradient--middle {
+  stop-color: shadeOrTint($euiColorLightestShade, 0%, 15%);
+  stop-opacity: 1;
+}

src/components/loading/index.ts

@@ -1,3 +1,4 @@
 export { EuiLoadingKibana } from './loading_kibana';
 export { EuiLoadingChart } from './loading_chart';
+export { EuiLoadingContent } from './loading_content';
 export { EuiLoadingSpinner } from './loading_spinner';

src/components/loading/loading_content.tsx

@@ -0,0 +1,71 @@
+import React, { FunctionComponent, HTMLAttributes } from 'react';
+import classNames from 'classnames';
+import { CommonProps } from '../common';
+
+export const EuiLoadingContent: FunctionComponent<
+  CommonProps &
+    HTMLAttributes<HTMLDivElement> & {
+      lines?: number;
+    }
+> = ({ lines = 3, className, ...rest }) => {
+  const classes = classNames('euiLoadingContent', className);
+  // We need an array for mapping the lines
+  const newLineArray = Array(lines).fill(undefined);
+  return (
+    <div className={classes} {...rest}>
+      <svg
+        viewBox="0 0"
+        height={newLineArray.length * 32}
+        fill="none"
+        className="euiLoadingContent__loader">
+        <mask id="euiLoadingContent__mask">
+          {newLineArray.map((line: undefined, index) => {
+            return (
+              <rect
+                className="euiLoadingContent__single-line"
+                y={index * 32}
+                width={newLineArray.length === index + 1 ? '75%' : '100%'}
+                height="24"
+                rx="4"
+              />
+            );
+          })}
+        </mask>
+
+        <linearGradient
+          id="euiLoadingContent__gradient"
+          x1="0%"
+          x2="100%"
+          y1="38%"
+          y2="40%">
+          <stop
+            className="euiLoadingContent__gradient--start-end"
+            offset="0%"
+          />
+          <stop className="euiLoadingContent__gradient--middle" offset="50%" />
+          <stop
+            className="euiLoadingContent__gradient--start-end"
+            offset="100%"
+          />
+          <animate
+            attributeName="x2"
+            dur="900ms"
+            from="20%"
+            to="300%"
+            repeatCount="indefinite"
+          />
+        </linearGradient>
+
+        <rect
+          id="shimmer"
+          x="0"
+          y="0"
+          width="100%"
+          height="100%"
+          fill="url(#euiLoadingContent__gradient)"
+          mask="url(#euiLoadingContent__mask)"
+        />
+      </svg>
+    </div>
+  );
+};