# Code

## API

This component extends all the native HTML ['div'](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) tag attributes. So you can use any native div prop on the component, for example, the `title` attribute.

<table><thead><tr><th width="163.7588075896112">Props</th><th width="414.7376821119017">Data Type</th><th>Required</th></tr></thead><tbody><tr><td><code>className</code></td><td><code>string</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td><code>size</code></td><td><code>'default' | 'medium' | 'large'</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr></tbody></table>

<details>

<summary>size</summary>

The `size` prop of the slider component can be used to define the height and width of the loader element displayed while the slider is loading. By default, the value of this prop is set to '`default`'. However, you can set it to one of the available values to customize the size of the loader to suit your needs.

</details>

## Example

<table data-view="cards"><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td>Live Code</td><td><a href="https://codesandbox.io/s/loader-38sz7c">Code Sandbox</a></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>

{% embed url="<https://codesandbox.io/p/sandbox/loader-jqfs5s?file=/src/App.tsx:1,1>" fullWidth="true" %}