# ContentLoader

*Category:* Components
*Section:* Content
*Source:* https://uikit.developers.rio.cloud/#/components/contentLoader
*Captured:* 2026-04-27T14:57:56.544Z

The content loader is based on the react-content-loader which can be found here: https://github.com/danilowoz/react-content-loader

## ContentLoader

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.

### Example: Example 1

Loading...
Loading... Loading... Loading... Loading...

#### React (tsx)

```tsx
import ContentLoader from '@rio-cloud/rio-uikit/ContentLoader';

export default () => (
    <div className='display-flex'>
        <div>
            <ContentLoader type={ContentLoader.CIRCLE} radius={20} />
        </div>
        <div className='margin-left-15'>
            <ContentLoader className='height-20 margin-bottom-10' />
            <ContentLoader />
            <ContentLoader width='80%' />
            <ContentLoader width='60%' />
        </div>
    </div>
);
```

#### HTML (html)

```html
<div class="display-flex">
    <div>
        <svg aria-labelledby=":r0:-aria" role="img" height="40" width="40" class="ContentLoader  ">
            <title id=":r0:-aria">Loading...</title>
            <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:r0:-diff)" style="fill: url(&quot;#:r0:-animated-diff&quot;);">
            </rect>
            <defs>
                <clipPath id=":r0:-diff">
                    <circle cx="20" cy="20" r="20">
                    </circle>
                </clipPath>
                <linearGradient id=":r0:-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=":r1:-aria" role="img" height="14" width="100%" class="ContentLoader height-20 margin-bottom-10 ">
            <title id=":r1:-aria">Loading...</title>
            <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:r1:-diff)" style="fill: url(&quot;#:r1:-animated-diff&quot;);">
            </rect>
            <defs>
                <clipPath id=":r1:-diff">
                    <rect width="100%" height="100%" rx="3" ry="3">
                    </rect>
                </clipPath>
                <linearGradient id=":r1:-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=":r2:-aria" role="img" height="14" width="100%" class="ContentLoader  ">
            <title id=":r2:-aria">Loading...</title>
            <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:r2:-diff)" style="fill: url(&quot;#:r2:-animated-diff&quot;);">
            </rect>
            <defs>
                <clipPath id=":r2:-diff">
                    <rect width="100%" height="100%" rx="3" ry="3">
                    </rect>
                </clipPath>
                <linearGradient id=":r2:-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=":r3:-aria" role="img" height="14" width="80%" class="ContentLoader  ">
            <title id=":r3:-aria">Loading...</title>
            <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:r3:-diff)" style="fill: url(&quot;#:r3:-animated-diff&quot;);">
            </rect>
            <defs>
                <clipPath id=":r3:-diff">
                    <rect width="100%" height="100%" rx="3" ry="3">
                    </rect>
                </clipPath>
                <linearGradient id=":r3:-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=":r4:-aria" role="img" height="14" width="60%" class="ContentLoader  ">
            <title id=":r4:-aria">Loading...</title>
            <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:r4:-diff)" style="fill: url(&quot;#:r4:-animated-diff&quot;);">
            </rect>
            <defs>
                <clipPath id=":r4:-diff">
                    <rect width="100%" height="100%" rx="3" ry="3">
                    </rect>
                </clipPath>
                <linearGradient id=":r4:-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>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| speed | number | 2 | Sets the animation speed. |
| height | string \| number | 14 | Sets the height of the svg element. |
| width | string \| number | 100% | Sets the width of the svg element. |
| radius | number | 16 | Sets the radius of the svg element. Only relevant for circle elements. |
| type | 'rect' \| 'circle' | — | Renders either a rectangle or circle. Possible values are: ContentLoader.RECT, ContentLoader.CIRCLE or rect, circle |
| className | string | — | Additional class names to ab added to the wrapping svg element. |
| rx | number | — | Rect object prop. Used internally. |
| ry | number | — | Rect object prop. Used internally. |

### Example: Example 2

Loading...
Loading... Loading...

#### React (tsx)

```tsx
import ContentLoader from '@rio-cloud/rio-uikit/ContentLoader';

export default () => (
    <div className='display-flex'>
        <div>
            <ContentLoader height={40} width={40} />
        </div>
        <div className='margin-left-15'>
            <ContentLoader />
            <ContentLoader />
        </div>
    </div>
);
```

#### HTML (html)

```html
<div class="display-flex">
    <div>
        <svg aria-labelledby=":r5:-aria" role="img" height="40" width="40" class="ContentLoader  ">
            <title id=":r5:-aria">Loading...</title>
            <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:r5:-diff)" style="fill: url(&quot;#:r5:-animated-diff&quot;);">
            </rect>
            <defs>
                <clipPath id=":r5:-diff">
                    <rect width="100%" height="100%" rx="3" ry="3">
                    </rect>
                </clipPath>
                <linearGradient id=":r5:-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=":r6:-aria" role="img" height="14" width="100%" class="ContentLoader  ">
            <title id=":r6:-aria">Loading...</title>
            <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:r6:-diff)" style="fill: url(&quot;#:r6:-animated-diff&quot;);">
            </rect>
            <defs>
                <clipPath id=":r6:-diff">
                    <rect width="100%" height="100%" rx="3" ry="3">
                    </rect>
                </clipPath>
                <linearGradient id=":r6:-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=":r7:-aria" role="img" height="14" width="100%" class="ContentLoader  ">
            <title id=":r7:-aria">Loading...</title>
            <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:r7:-diff)" style="fill: url(&quot;#:r7:-animated-diff&quot;);">
            </rect>
            <defs>
                <clipPath id=":r7:-diff">
                    <rect width="100%" height="100%" rx="3" ry="3">
                    </rect>
                </clipPath>
                <linearGradient id=":r7:-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>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| speed | number | 2 | Sets the animation speed. |
| height | string \| number | 14 | Sets the height of the svg element. |
| width | string \| number | 100% | Sets the width of the svg element. |
| radius | number | 16 | Sets the radius of the svg element. Only relevant for circle elements. |
| type | 'rect' \| 'circle' | — | Renders either a rectangle or circle. Possible values are: ContentLoader.RECT, ContentLoader.CIRCLE or rect, circle |
| className | string | — | Additional class names to ab added to the wrapping svg element. |
| rx | number | — | Rect object prop. Used internally. |
| ry | number | — | Rect object prop. Used internally. |

### Example: Example 3

Column 1 Column 2 Column 3 Column 4

Loading... Loading... Loading... Loading...
Loading... Loading... Loading... Loading...
Loading... Loading... Loading... Loading...

#### React (tsx)

```tsx
import ContentLoader from '@rio-cloud/rio-uikit/ContentLoader';

export default () => (
    <table className='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>
                    <ContentLoader />
                </td>
                <td>
                    <ContentLoader />
                </td>
                <td>
                    <ContentLoader />
                </td>
                <td>
                    <ContentLoader />
                </td>
            </tr>
            <tr>
                <td>
                    <ContentLoader />
                </td>
                <td>
                    <ContentLoader />
                </td>
                <td>
                    <ContentLoader />
                </td>
                <td>
                    <ContentLoader />
                </td>
            </tr>
            <tr>
                <td>
                    <ContentLoader />
                </td>
                <td>
                    <ContentLoader />
                </td>
                <td>
                    <ContentLoader />
                </td>
                <td>
                    <ContentLoader />
                </td>
            </tr>
        </tbody>
    </table>
);
```

#### HTML (html)

```html
<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=":r8:-aria" role="img" height="14" width="100%" class="ContentLoader  ">
                    <title id=":r8:-aria">Loading...</title>
                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:r8:-diff)" style="fill: url(&quot;#:r8:-animated-diff&quot;);">
                    </rect>
                    <defs>
                        <clipPath id=":r8:-diff">
                            <rect width="100%" height="100%" rx="3" ry="3">
                            </rect>
                        </clipPath>
                        <linearGradient id=":r8:-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=":r9:-aria" role="img" height="14" width="100%" class="ContentLoader  ">
                    <title id=":r9:-aria">Loading...</title>
                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:r9:-diff)" style="fill: url(&quot;#:r9:-animated-diff&quot;);">
                    </rect>
                    <defs>
                        <clipPath id=":r9:-diff">
                            <rect width="100%" height="100%" rx="3" ry="3">
                            </rect>
                        </clipPath>
                        <linearGradient id=":r9:-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=":ra:-aria" role="img" height="14" width="100%" class="ContentLoader  ">
                    <title id=":ra:-aria">Loading...</title>
                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:ra:-diff)" style="fill: url(&quot;#:ra:-animated-diff&quot;);">
                    </rect>
                    <defs>
                        <clipPath id=":ra:-diff">
                            <rect width="100%" height="100%" rx="3" ry="3">
                            </rect>
                        </clipPath>
                        <linearGradient id=":ra:-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=":rb:-aria" role="img" height="14" width="100%" class="ContentLoader  ">
                    <title id=":rb:-aria">Loading...</title>
                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:rb:-diff)" style="fill: url(&quot;#:rb:-animated-diff&quot;);">
                    </rect>
                    <defs>
                        <clipPath id=":rb:-diff">
                            <rect width="100%" height="100%" rx="3" ry="3">
                            </rect>
                        </clipPath>
                        <linearGradient id=":rb:-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=":rc:-aria" role="img" height="14" width="100%" class="ContentLoader  ">
                    <title id=":rc:-aria">Loading...</title>
                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:rc:-diff)" style="fill: url(&quot;#:rc:-animated-diff&quot;);">
                    </rect>
                    <defs>
                        <clipPath id=":rc:-diff">
                            <rect width="100%" height="100%" rx="3" ry="3">
                            </rect>
                        </clipPath>
                        <linearGradient id=":rc:-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=":rd:-aria" role="img" height="14" width="100%" class="ContentLoader  ">
                    <title id=":rd:-aria">Loading...</title>
                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:rd:-diff)" style="fill: url(&quot;#:rd:-animated-diff&quot;);">
                    </rect>
                    <defs>
                        <clipPath id=":rd:-diff">
                            <rect width="100%" height="100%" rx="3" ry="3">
                            </rect>
                        </clipPath>
                        <linearGradient id=":rd:-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=":re:-aria" role="img" height="14" width="100%" class="ContentLoader  ">
                    <title id=":re:-aria">Loading...</title>
                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:re:-diff)" style="fill: url(&quot;#:re:-animated-diff&quot;);">
                    </rect>
                    <defs>
                        <clipPath id=":re:-diff">
                            <rect width="100%" height="100%" rx="3" ry="3">
                            </rect>
                        </clipPath>
                        <linearGradient id=":re:-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=":rf:-aria" role="img" height="14" width="100%" class="ContentLoader  ">
                    <title id=":rf:-aria">Loading...</title>
                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:rf:-diff)" style="fill: url(&quot;#:rf:-animated-diff&quot;);">
                    </rect>
                    <defs>
                        <clipPath id=":rf:-diff">
                            <rect width="100%" height="100%" rx="3" ry="3">
                            </rect>
                        </clipPath>
                        <linearGradient id=":rf:-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=":rg:-aria" role="img" height="14" width="100%" class="ContentLoader  ">
                    <title id=":rg:-aria">Loading...</title>
                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:rg:-diff)" style="fill: url(&quot;#:rg:-animated-diff&quot;);">
                    </rect>
                    <defs>
                        <clipPath id=":rg:-diff">
                            <rect width="100%" height="100%" rx="3" ry="3">
                            </rect>
                        </clipPath>
                        <linearGradient id=":rg:-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=":rh:-aria" role="img" height="14" width="100%" class="ContentLoader  ">
                    <title id=":rh:-aria">Loading...</title>
                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:rh:-diff)" style="fill: url(&quot;#:rh:-animated-diff&quot;);">
                    </rect>
                    <defs>
                        <clipPath id=":rh:-diff">
                            <rect width="100%" height="100%" rx="3" ry="3">
                            </rect>
                        </clipPath>
                        <linearGradient id=":rh:-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=":ri:-aria" role="img" height="14" width="100%" class="ContentLoader  ">
                    <title id=":ri:-aria">Loading...</title>
                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:ri:-diff)" style="fill: url(&quot;#:ri:-animated-diff&quot;);">
                    </rect>
                    <defs>
                        <clipPath id=":ri:-diff">
                            <rect width="100%" height="100%" rx="3" ry="3">
                            </rect>
                        </clipPath>
                        <linearGradient id=":ri:-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=":rj:-aria" role="img" height="14" width="100%" class="ContentLoader  ">
                    <title id=":rj:-aria">Loading...</title>
                    <rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#:rj:-diff)" style="fill: url(&quot;#:rj:-animated-diff&quot;);">
                    </rect>
                    <defs>
                        <clipPath id=":rj:-diff">
                            <rect width="100%" height="100%" rx="3" ry="3">
                            </rect>
                        </clipPath>
                        <linearGradient id=":rj:-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>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| speed | number | 2 | Sets the animation speed. |
| height | string \| number | 14 | Sets the height of the svg element. |
| width | string \| number | 100% | Sets the width of the svg element. |
| radius | number | 16 | Sets the radius of the svg element. Only relevant for circle elements. |
| type | 'rect' \| 'circle' | — | Renders either a rectangle or circle. Possible values are: ContentLoader.RECT, ContentLoader.CIRCLE or rect, circle |
| className | string | — | Additional class names to ab added to the wrapping svg element. |
| rx | number | — | Rect object prop. Used internally. |
| ry | number | — | Rect object prop. Used internally. |