---
name: Usage
route: /usage
---

import { Playground } from 'docz'

import ContentLoader, {
  Facebook,
  Instagram,
  Code,
  List,
  BulletList,
} from '../src'

## Usage

## Different Type of Loaders

### Facebook Style Loader

<Playground>
  <Facebook />
</Playground>

### Instagram Style Loader

<Playground>
  <Instagram />
</Playground>

### Code Style Loader

<Playground>
  <Code />
</Playground>

### List Style Loader

<Playground>
  <List />
</Playground>

### BulletList Style Loader

<Playground>
  <BulletList />
</Playground>

### Custom Loader

<Playground>
  <ContentLoader>
    <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
    <rect x="82" y="44" rx="3" ry="3" width="250" height="10" />
    <circle cx="35" cy="35" r="35" />
  </ContentLoader>
</Playground>