import CodeRender from '../../CodeRender'

### Loading spinner (Default)

<CodeRender className="space-x-2" code={`
<span class="loading loading-xs"></span>
<span class="loading loading-sm"></span>
<span class="loading loading-md"></span>
<span class="loading loading-lg"></span>

`} />

```html
<span class="loading loading-xs"></span>
<span class="loading loading-sm"></span>
<span class="loading loading-md"></span>
<span class="loading loading-lg"></span>
```

### Loading Shapes

<CodeRender
  code={`
<div class="grid grid-cols-4 gap-4 items-center">
  <span class="loading loading-audio"></span>
  <span class="loading loading-ball-triangle"></span>
  <span class="loading loading-bars"></span>
  <span class="loading loading-circles"></span>
  <span class="loading loading-grid"></span>
  <span class="loading loading-hearts"></span>
  <span class="loading loading-oval"></span>
  <span class="loading loading-puff"></span>
  <span class="loading loading-rings"></span>
  <span class="loading loading-spinning-circles"></span>
  <span class="loading loading-tail-spin"></span>
  <span class="loading loading-three-dots"></span>
</div>
`}
/>

```html
<span class="loading loading-audio"></span>
<span class="loading loading-ball-triangle"></span>
<span class="loading loading-bars"></span>
<span class="loading loading-circles"></span>
<span class="loading loading-grid"></span>
<span class="loading loading-hearts"></span>
<span class="loading loading-oval"></span>
<span class="loading loading-puff"></span>
<span class="loading loading-rings"></span>
<span class="loading loading-spinning-circles"></span>
<span class="loading loading-tail-spin"></span>
<span class="loading loading-three-dots"></span> 
```

### Loading with colors

<CodeRender
  className="space-x-2"
  code={`
<span class="loading text-primary"></span>
<span class="loading text-neutral"></span>
<span class="loading text-success"></span>
<span class="loading text-warning"></span>
<span class="loading text-error"></span>
`}
/>
```html
<span class="loading text-primary"></span>
<span class="loading text-neutral"></span>
<span class="loading text-success"></span>
<span class="loading text-warning"></span>
<span class="loading text-error"></span>
```
