@rio-cloud/uikit-mcp 1.0.0

package/data/pages/Components/components/contentloader.json

@@ -0,0 +1,233 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:36.474Z",
+    "source": "https://uikit.developers.rio.cloud/#components/contentLoader",
+    "category": "Components",
+    "section": "Content",
+    "slug": "components/contentloader",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "d7950434d61ed0ef262f47acde467bfc8999a9cd0f0caca3a208a7043f72e429"
+  },
+  "title": "ContentLoader",
+  "lead": "The content loader is based on the react-content-loader which can be found here: https://github.com/danilowoz/react-content-loader",
+  "content": [
+    {
+      "heading": "ContentLoader",
+      "body": "This UIKIT component is simple wrapper to make it easier to use with a predefined look and feel. It still allows for more complex configurations as all additional props are passed down to the third-party ContentLoader component. For individual customization, it allows passing svg components as rect or circle directly as children.",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-flex\"><div><svg aria-labelledby=\"1augl7x-aria\" role=\"img\" height=\"40\" width=\"40\" class=\"ContentLoader  \"><title id=\"1augl7x-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#1augl7x-diff)\" style=\"fill: url(&quot;#1augl7x-animated-diff&quot;);\"></rect><defs><clipPath id=\"1augl7x-diff\"><circle cx=\"20\" cy=\"20\" r=\"20\"></circle></clipPath><linearGradient id=\"1augl7x-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg></div><div class=\"margin-left-15\"><svg aria-labelledby=\"p9ai81-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader height-20 margin-bottom-10 \"><title id=\"p9ai81-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#p9ai81-diff)\" style=\"fill: url(&quot;#p9ai81-animated-diff&quot;);\"></rect><defs><clipPath id=\"p9ai81-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"p9ai81-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg><svg aria-labelledby=\"4g57eq-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \"><title id=\"4g57eq-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#4g57eq-diff)\" style=\"fill: url(&quot;#4g57eq-animated-diff&quot;);\"></rect><defs><clipPath id=\"4g57eq-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"4g57eq-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg><svg aria-labelledby=\"0w0jwl-aria\" role=\"img\" height=\"14\" width=\"80%\" class=\"ContentLoader  \"><title id=\"0w0jwl-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#0w0jwl-diff)\" style=\"fill: url(&quot;#0w0jwl-animated-diff&quot;);\"></rect><defs><clipPath id=\"0w0jwl-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"0w0jwl-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg><svg aria-labelledby=\"nb8lsl-aria\" role=\"img\" height=\"14\" width=\"60%\" class=\"ContentLoader  \"><title id=\"nb8lsl-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#nb8lsl-diff)\" style=\"fill: url(&quot;#nb8lsl-animated-diff&quot;);\"></rect><defs><clipPath id=\"nb8lsl-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"nb8lsl-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import ContentLoader from '@rio-cloud/rio-uikit/ContentLoader';\n\nexport default () => (\n    <div className='display-flex'>\n        <div>\n            <ContentLoader type={ContentLoader.CIRCLE} radius={20} />\n        </div>\n        <div className='margin-left-15'>\n            <ContentLoader className='height-20 margin-bottom-10' />\n            <ContentLoader />\n            <ContentLoader width='80%' />\n            <ContentLoader width='60%' />\n        </div>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex\">\n    <div>\n        <svg aria-labelledby=\"1augl7x-aria\" role=\"img\" height=\"40\" width=\"40\" class=\"ContentLoader  \">\n            <title id=\"1augl7x-aria\">Loading...</title>\n            <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#1augl7x-diff)\" style=\"fill: url(&quot;#1augl7x-animated-diff&quot;);\">\n            </rect>\n            <defs>\n                <clipPath id=\"1augl7x-diff\">\n                    <circle cx=\"20\" cy=\"20\" r=\"20\">\n                    </circle>\n                </clipPath>\n                <linearGradient id=\"1augl7x-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                    <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                    </stop>\n                    <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                    </stop>\n                    <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                    </stop>\n                    <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                    </animateTransform>\n                </linearGradient>\n            </defs>\n        </svg>\n    </div>\n    <div class=\"margin-left-15\">\n        <svg aria-labelledby=\"p9ai81-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader height-20 margin-bottom-10 \">\n            <title id=\"p9ai81-aria\">Loading...</title>\n            <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#p9ai81-diff)\" style=\"fill: url(&quot;#p9ai81-animated-diff&quot;);\">\n            </rect>\n            <defs>\n                <clipPath id=\"p9ai81-diff\">\n                    <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                    </rect>\n                </clipPath>\n                <linearGradient id=\"p9ai81-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                    <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                    </stop>\n                    <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                    </stop>\n                    <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                    </stop>\n                    <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                    </animateTransform>\n                </linearGradient>\n            </defs>\n        </svg>\n        <svg aria-labelledby=\"4g57eq-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \">\n            <title id=\"4g57eq-aria\">Loading...</title>\n            <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#4g57eq-diff)\" style=\"fill: url(&quot;#4g57eq-animated-diff&quot;);\">\n            </rect>\n            <defs>\n                <clipPath id=\"4g57eq-diff\">\n                    <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                    </rect>\n                </clipPath>\n                <linearGradient id=\"4g57eq-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                    <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                    </stop>\n                    <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                    </stop>\n                    <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                    </stop>\n                    <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                    </animateTransform>\n                </linearGradient>\n            </defs>\n        </svg>\n        <svg aria-labelledby=\"0w0jwl-aria\" role=\"img\" height=\"14\" width=\"80%\" class=\"ContentLoader  \">\n            <title id=\"0w0jwl-aria\">Loading...</title>\n            <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#0w0jwl-diff)\" style=\"fill: url(&quot;#0w0jwl-animated-diff&quot;);\">\n            </rect>\n            <defs>\n                <clipPath id=\"0w0jwl-diff\">\n                    <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                    </rect>\n                </clipPath>\n                <linearGradient id=\"0w0jwl-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                    <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                    </stop>\n                    <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                    </stop>\n                    <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                    </stop>\n                    <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                    </animateTransform>\n                </linearGradient>\n            </defs>\n        </svg>\n        <svg aria-labelledby=\"nb8lsl-aria\" role=\"img\" height=\"14\" width=\"60%\" class=\"ContentLoader  \">\n            <title id=\"nb8lsl-aria\">Loading...</title>\n            <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#nb8lsl-diff)\" style=\"fill: url(&quot;#nb8lsl-animated-diff&quot;);\">\n            </rect>\n            <defs>\n                <clipPath id=\"nb8lsl-diff\">\n                    <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                    </rect>\n                </clipPath>\n                <linearGradient id=\"nb8lsl-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                    <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                    </stop>\n                    <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                    </stop>\n                    <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                    </stop>\n                    <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                    </animateTransform>\n                </linearGradient>\n            </defs>\n        </svg>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "speed",
+                      "type": "Number",
+                      "default": "2",
+                      "description": "Sets the animation speed."
+                    },
+                    {
+                      "name": "height",
+                      "type": "Number / String",
+                      "default": "14",
+                      "description": "Sets the height of the svg element."
+                    },
+                    {
+                      "name": "width",
+                      "type": "Number / String",
+                      "default": "100%",
+                      "description": "Sets the width of the svg element."
+                    },
+                    {
+                      "name": "radius",
+                      "type": "Number",
+                      "default": "16",
+                      "description": "Sets the radius of the svg element. Only relevant for circle elements."
+                    },
+                    {
+                      "name": "type",
+                      "type": "String",
+                      "default": "ContentLoader.RECT",
+                      "description": "Renders either a rectangle or circle. Possible values are: rect, circle or ContentLoader.RECT, ContentLoader.CIRCLE"
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names to ab added to the wrapping svg element."
+                    },
+                    {
+                      "name": "children",
+                      "type": "Node",
+                      "default": "",
+                      "description": "Pass any svg elements for when you need further customizations."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-flex\"><div><svg aria-labelledby=\"xkgywop-aria\" role=\"img\" height=\"40\" width=\"40\" class=\"ContentLoader  \"><title id=\"xkgywop-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#xkgywop-diff)\" style=\"fill: url(&quot;#xkgywop-animated-diff&quot;);\"></rect><defs><clipPath id=\"xkgywop-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"xkgywop-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg></div><div class=\"margin-left-15\"><svg aria-labelledby=\"cpr5kps-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \"><title id=\"cpr5kps-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#cpr5kps-diff)\" style=\"fill: url(&quot;#cpr5kps-animated-diff&quot;);\"></rect><defs><clipPath id=\"cpr5kps-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"cpr5kps-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg><svg aria-labelledby=\"hzz9oz6-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \"><title id=\"hzz9oz6-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#hzz9oz6-diff)\" style=\"fill: url(&quot;#hzz9oz6-animated-diff&quot;);\"></rect><defs><clipPath id=\"hzz9oz6-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"hzz9oz6-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import ContentLoader from '@rio-cloud/rio-uikit/ContentLoader';\n\nexport default () => (\n    <div className='display-flex'>\n        <div>\n            <ContentLoader height={40} width={40} />\n        </div>\n        <div className='margin-left-15'>\n            <ContentLoader />\n            <ContentLoader />\n        </div>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex\">\n    <div>\n        <svg aria-labelledby=\"xkgywop-aria\" role=\"img\" height=\"40\" width=\"40\" class=\"ContentLoader  \">\n            <title id=\"xkgywop-aria\">Loading...</title>\n            <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#xkgywop-diff)\" style=\"fill: url(&quot;#xkgywop-animated-diff&quot;);\">\n            </rect>\n            <defs>\n                <clipPath id=\"xkgywop-diff\">\n                    <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                    </rect>\n                </clipPath>\n                <linearGradient id=\"xkgywop-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                    <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                    </stop>\n                    <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                    </stop>\n                    <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                    </stop>\n                    <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                    </animateTransform>\n                </linearGradient>\n            </defs>\n        </svg>\n    </div>\n    <div class=\"margin-left-15\">\n        <svg aria-labelledby=\"cpr5kps-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \">\n            <title id=\"cpr5kps-aria\">Loading...</title>\n            <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#cpr5kps-diff)\" style=\"fill: url(&quot;#cpr5kps-animated-diff&quot;);\">\n            </rect>\n            <defs>\n                <clipPath id=\"cpr5kps-diff\">\n                    <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                    </rect>\n                </clipPath>\n                <linearGradient id=\"cpr5kps-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                    <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                    </stop>\n                    <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                    </stop>\n                    <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                    </stop>\n                    <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                    </animateTransform>\n                </linearGradient>\n            </defs>\n        </svg>\n        <svg aria-labelledby=\"hzz9oz6-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \">\n            <title id=\"hzz9oz6-aria\">Loading...</title>\n            <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#hzz9oz6-diff)\" style=\"fill: url(&quot;#hzz9oz6-animated-diff&quot;);\">\n            </rect>\n            <defs>\n                <clipPath id=\"hzz9oz6-diff\">\n                    <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                    </rect>\n                </clipPath>\n                <linearGradient id=\"hzz9oz6-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                    <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                    </stop>\n                    <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                    </stop>\n                    <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                    </stop>\n                    <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                    </animateTransform>\n                </linearGradient>\n            </defs>\n        </svg>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "speed",
+                      "type": "Number",
+                      "default": "2",
+                      "description": "Sets the animation speed."
+                    },
+                    {
+                      "name": "height",
+                      "type": "Number / String",
+                      "default": "14",
+                      "description": "Sets the height of the svg element."
+                    },
+                    {
+                      "name": "width",
+                      "type": "Number / String",
+                      "default": "100%",
+                      "description": "Sets the width of the svg element."
+                    },
+                    {
+                      "name": "radius",
+                      "type": "Number",
+                      "default": "16",
+                      "description": "Sets the radius of the svg element. Only relevant for circle elements."
+                    },
+                    {
+                      "name": "type",
+                      "type": "String",
+                      "default": "ContentLoader.RECT",
+                      "description": "Renders either a rectangle or circle. Possible values are: rect, circle or ContentLoader.RECT, ContentLoader.CIRCLE"
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names to ab added to the wrapping svg element."
+                    },
+                    {
+                      "name": "children",
+                      "type": "Node",
+                      "default": "",
+                      "description": "Pass any svg elements for when you need further customizations."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Example 3",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><table class=\"table table-bordered table-head-filled table-hover\"><thead><tr><th>Column 1</th><th>Column 2</th><th>Column 3</th><th>Column 4</th></tr></thead><tbody><tr><td><svg aria-labelledby=\"ajn6p9g-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \"><title id=\"ajn6p9g-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#ajn6p9g-diff)\" style=\"fill: url(&quot;#ajn6p9g-animated-diff&quot;);\"></rect><defs><clipPath id=\"ajn6p9g-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"ajn6p9g-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg></td><td><svg aria-labelledby=\"p02rnc-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \"><title id=\"p02rnc-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#p02rnc-diff)\" style=\"fill: url(&quot;#p02rnc-animated-diff&quot;);\"></rect><defs><clipPath id=\"p02rnc-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"p02rnc-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg></td><td><svg aria-labelledby=\"hlyuzt-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \"><title id=\"hlyuzt-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#hlyuzt-diff)\" style=\"fill: url(&quot;#hlyuzt-animated-diff&quot;);\"></rect><defs><clipPath id=\"hlyuzt-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"hlyuzt-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg></td><td><svg aria-labelledby=\"yw1bfik-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \"><title id=\"yw1bfik-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#yw1bfik-diff)\" style=\"fill: url(&quot;#yw1bfik-animated-diff&quot;);\"></rect><defs><clipPath id=\"yw1bfik-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"yw1bfik-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg></td></tr><tr><td><svg aria-labelledby=\"vj8o9rg-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \"><title id=\"vj8o9rg-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#vj8o9rg-diff)\" style=\"fill: url(&quot;#vj8o9rg-animated-diff&quot;);\"></rect><defs><clipPath id=\"vj8o9rg-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"vj8o9rg-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg></td><td><svg aria-labelledby=\"y4yeq39-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \"><title id=\"y4yeq39-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#y4yeq39-diff)\" style=\"fill: url(&quot;#y4yeq39-animated-diff&quot;);\"></rect><defs><clipPath id=\"y4yeq39-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"y4yeq39-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg></td><td><svg aria-labelledby=\"70694b-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \"><title id=\"70694b-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#70694b-diff)\" style=\"fill: url(&quot;#70694b-animated-diff&quot;);\"></rect><defs><clipPath id=\"70694b-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"70694b-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg></td><td><svg aria-labelledby=\"e23im7x-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \"><title id=\"e23im7x-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#e23im7x-diff)\" style=\"fill: url(&quot;#e23im7x-animated-diff&quot;);\"></rect><defs><clipPath id=\"e23im7x-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"e23im7x-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg></td></tr><tr><td><svg aria-labelledby=\"wdlicmn-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \"><title id=\"wdlicmn-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#wdlicmn-diff)\" style=\"fill: url(&quot;#wdlicmn-animated-diff&quot;);\"></rect><defs><clipPath id=\"wdlicmn-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"wdlicmn-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg></td><td><svg aria-labelledby=\"jeypaz7-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \"><title id=\"jeypaz7-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#jeypaz7-diff)\" style=\"fill: url(&quot;#jeypaz7-animated-diff&quot;);\"></rect><defs><clipPath id=\"jeypaz7-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"jeypaz7-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg></td><td><svg aria-labelledby=\"8shlaj-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \"><title id=\"8shlaj-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#8shlaj-diff)\" style=\"fill: url(&quot;#8shlaj-animated-diff&quot;);\"></rect><defs><clipPath id=\"8shlaj-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"8shlaj-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg></td><td><svg aria-labelledby=\"tdc1hv7-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \"><title id=\"tdc1hv7-aria\">Loading...</title><rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#tdc1hv7-diff)\" style=\"fill: url(&quot;#tdc1hv7-animated-diff&quot;);\"></rect><defs><clipPath id=\"tdc1hv7-diff\"><rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\"></rect></clipPath><linearGradient id=\"tdc1hv7-animated-diff\" gradientTransform=\"translate(-2 0)\"><stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\"></stop><stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\"></stop><animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\"></animateTransform></linearGradient></defs></svg></td></tr></tbody></table></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import ContentLoader from '@rio-cloud/rio-uikit/ContentLoader';\n\nexport default () => (\n    <table className='table table-bordered table-head-filled table-hover'>\n        <thead>\n            <tr>\n                <th>Column 1</th>\n                <th>Column 2</th>\n                <th>Column 3</th>\n                <th>Column 4</th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr>\n                <td>\n                    <ContentLoader />\n                </td>\n                <td>\n                    <ContentLoader />\n                </td>\n                <td>\n                    <ContentLoader />\n                </td>\n                <td>\n                    <ContentLoader />\n                </td>\n            </tr>\n            <tr>\n                <td>\n                    <ContentLoader />\n                </td>\n                <td>\n                    <ContentLoader />\n                </td>\n                <td>\n                    <ContentLoader />\n                </td>\n                <td>\n                    <ContentLoader />\n                </td>\n            </tr>\n            <tr>\n                <td>\n                    <ContentLoader />\n                </td>\n                <td>\n                    <ContentLoader />\n                </td>\n                <td>\n                    <ContentLoader />\n                </td>\n                <td>\n                    <ContentLoader />\n                </td>\n            </tr>\n        </tbody>\n    </table>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<table class=\"table table-bordered table-head-filled table-hover\">\n    <thead>\n        <tr>\n            <th>Column 1</th>\n            <th>Column 2</th>\n            <th>Column 3</th>\n            <th>Column 4</th>\n        </tr>\n    </thead>\n    <tbody>\n        <tr>\n            <td>\n                <svg aria-labelledby=\"ajn6p9g-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \">\n                    <title id=\"ajn6p9g-aria\">Loading...</title>\n                    <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#ajn6p9g-diff)\" style=\"fill: url(&quot;#ajn6p9g-animated-diff&quot;);\">\n                    </rect>\n                    <defs>\n                        <clipPath id=\"ajn6p9g-diff\">\n                            <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                            </rect>\n                        </clipPath>\n                        <linearGradient id=\"ajn6p9g-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                            <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                            </animateTransform>\n                        </linearGradient>\n                    </defs>\n                </svg>\n            </td>\n            <td>\n                <svg aria-labelledby=\"p02rnc-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \">\n                    <title id=\"p02rnc-aria\">Loading...</title>\n                    <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#p02rnc-diff)\" style=\"fill: url(&quot;#p02rnc-animated-diff&quot;);\">\n                    </rect>\n                    <defs>\n                        <clipPath id=\"p02rnc-diff\">\n                            <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                            </rect>\n                        </clipPath>\n                        <linearGradient id=\"p02rnc-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                            <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                            </animateTransform>\n                        </linearGradient>\n                    </defs>\n                </svg>\n            </td>\n            <td>\n                <svg aria-labelledby=\"hlyuzt-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \">\n                    <title id=\"hlyuzt-aria\">Loading...</title>\n                    <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#hlyuzt-diff)\" style=\"fill: url(&quot;#hlyuzt-animated-diff&quot;);\">\n                    </rect>\n                    <defs>\n                        <clipPath id=\"hlyuzt-diff\">\n                            <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                            </rect>\n                        </clipPath>\n                        <linearGradient id=\"hlyuzt-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                            <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                            </animateTransform>\n                        </linearGradient>\n                    </defs>\n                </svg>\n            </td>\n            <td>\n                <svg aria-labelledby=\"yw1bfik-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \">\n                    <title id=\"yw1bfik-aria\">Loading...</title>\n                    <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#yw1bfik-diff)\" style=\"fill: url(&quot;#yw1bfik-animated-diff&quot;);\">\n                    </rect>\n                    <defs>\n                        <clipPath id=\"yw1bfik-diff\">\n                            <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                            </rect>\n                        </clipPath>\n                        <linearGradient id=\"yw1bfik-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                            <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                            </animateTransform>\n                        </linearGradient>\n                    </defs>\n                </svg>\n            </td>\n        </tr>\n        <tr>\n            <td>\n                <svg aria-labelledby=\"vj8o9rg-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \">\n                    <title id=\"vj8o9rg-aria\">Loading...</title>\n                    <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#vj8o9rg-diff)\" style=\"fill: url(&quot;#vj8o9rg-animated-diff&quot;);\">\n                    </rect>\n                    <defs>\n                        <clipPath id=\"vj8o9rg-diff\">\n                            <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                            </rect>\n                        </clipPath>\n                        <linearGradient id=\"vj8o9rg-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                            <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                            </animateTransform>\n                        </linearGradient>\n                    </defs>\n                </svg>\n            </td>\n            <td>\n                <svg aria-labelledby=\"y4yeq39-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \">\n                    <title id=\"y4yeq39-aria\">Loading...</title>\n                    <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#y4yeq39-diff)\" style=\"fill: url(&quot;#y4yeq39-animated-diff&quot;);\">\n                    </rect>\n                    <defs>\n                        <clipPath id=\"y4yeq39-diff\">\n                            <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                            </rect>\n                        </clipPath>\n                        <linearGradient id=\"y4yeq39-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                            <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                            </animateTransform>\n                        </linearGradient>\n                    </defs>\n                </svg>\n            </td>\n            <td>\n                <svg aria-labelledby=\"70694b-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \">\n                    <title id=\"70694b-aria\">Loading...</title>\n                    <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#70694b-diff)\" style=\"fill: url(&quot;#70694b-animated-diff&quot;);\">\n                    </rect>\n                    <defs>\n                        <clipPath id=\"70694b-diff\">\n                            <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                            </rect>\n                        </clipPath>\n                        <linearGradient id=\"70694b-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                            <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                            </animateTransform>\n                        </linearGradient>\n                    </defs>\n                </svg>\n            </td>\n            <td>\n                <svg aria-labelledby=\"e23im7x-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \">\n                    <title id=\"e23im7x-aria\">Loading...</title>\n                    <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#e23im7x-diff)\" style=\"fill: url(&quot;#e23im7x-animated-diff&quot;);\">\n                    </rect>\n                    <defs>\n                        <clipPath id=\"e23im7x-diff\">\n                            <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                            </rect>\n                        </clipPath>\n                        <linearGradient id=\"e23im7x-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                            <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                            </animateTransform>\n                        </linearGradient>\n                    </defs>\n                </svg>\n            </td>\n        </tr>\n        <tr>\n            <td>\n                <svg aria-labelledby=\"wdlicmn-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \">\n                    <title id=\"wdlicmn-aria\">Loading...</title>\n                    <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#wdlicmn-diff)\" style=\"fill: url(&quot;#wdlicmn-animated-diff&quot;);\">\n                    </rect>\n                    <defs>\n                        <clipPath id=\"wdlicmn-diff\">\n                            <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                            </rect>\n                        </clipPath>\n                        <linearGradient id=\"wdlicmn-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                            <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                            </animateTransform>\n                        </linearGradient>\n                    </defs>\n                </svg>\n            </td>\n            <td>\n                <svg aria-labelledby=\"jeypaz7-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \">\n                    <title id=\"jeypaz7-aria\">Loading...</title>\n                    <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#jeypaz7-diff)\" style=\"fill: url(&quot;#jeypaz7-animated-diff&quot;);\">\n                    </rect>\n                    <defs>\n                        <clipPath id=\"jeypaz7-diff\">\n                            <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                            </rect>\n                        </clipPath>\n                        <linearGradient id=\"jeypaz7-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                            <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                            </animateTransform>\n                        </linearGradient>\n                    </defs>\n                </svg>\n            </td>\n            <td>\n                <svg aria-labelledby=\"8shlaj-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \">\n                    <title id=\"8shlaj-aria\">Loading...</title>\n                    <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#8shlaj-diff)\" style=\"fill: url(&quot;#8shlaj-animated-diff&quot;);\">\n                    </rect>\n                    <defs>\n                        <clipPath id=\"8shlaj-diff\">\n                            <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                            </rect>\n                        </clipPath>\n                        <linearGradient id=\"8shlaj-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                            <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                            </animateTransform>\n                        </linearGradient>\n                    </defs>\n                </svg>\n            </td>\n            <td>\n                <svg aria-labelledby=\"tdc1hv7-aria\" role=\"img\" height=\"14\" width=\"100%\" class=\"ContentLoader  \">\n                    <title id=\"tdc1hv7-aria\">Loading...</title>\n                    <rect role=\"presentation\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" clip-path=\"url(#tdc1hv7-diff)\" style=\"fill: url(&quot;#tdc1hv7-animated-diff&quot;);\">\n                    </rect>\n                    <defs>\n                        <clipPath id=\"tdc1hv7-diff\">\n                            <rect width=\"100%\" height=\"100%\" rx=\"3\" ry=\"3\">\n                            </rect>\n                        </clipPath>\n                        <linearGradient id=\"tdc1hv7-animated-diff\" gradientTransform=\"translate(-2 0)\">\n                            <stop offset=\"0%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"50%\" stop-color=\"#eeeeee\" stop-opacity=\"1\">\n                            </stop>\n                            <stop offset=\"100%\" stop-color=\"#f5f6f7\" stop-opacity=\"1\">\n                            </stop>\n                            <animateTransform attributeName=\"gradientTransform\" type=\"translate\" values=\"-2 0; 0 0; 2 0\" dur=\"2s\" repeatCount=\"indefinite\">\n                            </animateTransform>\n                        </linearGradient>\n                    </defs>\n                </svg>\n            </td>\n        </tr>\n    </tbody>\n</table>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "speed",
+                      "type": "Number",
+                      "default": "2",
+                      "description": "Sets the animation speed."
+                    },
+                    {
+                      "name": "height",
+                      "type": "Number / String",
+                      "default": "14",
+                      "description": "Sets the height of the svg element."
+                    },
+                    {
+                      "name": "width",
+                      "type": "Number / String",
+                      "default": "100%",
+                      "description": "Sets the width of the svg element."
+                    },
+                    {
+                      "name": "radius",
+                      "type": "Number",
+                      "default": "16",
+                      "description": "Sets the radius of the svg element. Only relevant for circle elements."
+                    },
+                    {
+                      "name": "type",
+                      "type": "String",
+                      "default": "ContentLoader.RECT",
+                      "description": "Renders either a rectangle or circle. Possible values are: rect, circle or ContentLoader.RECT, ContentLoader.CIRCLE"
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names to ab added to the wrapping svg element."
+                    },
+                    {
+                      "name": "children",
+                      "type": "Node",
+                      "default": "",
+                      "description": "Pass any svg elements for when you need further customizations."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}