svelte-placeholder

Svelte Placeholder

Customizable content placeholders to render in place of components while loading

Example

Svelte Content Placeholder

Replicate components with shadow versions while content is not yet available

Getting Started

To use the Svelte Placeholder library in your Svelte application, you can install it using npm:

npm install @whizzes/svelte-placeholder

Usage

<script>
    import Placeholder from 'svelte-content-placeholder';
</script>

<Placeholder>
    <circle cx="50" cy="30" r="30" />
    <rect x="10" y="70" rx="3" ry="3" width="40" height="10" />
    <rect x="60" y="70" rx="3" ry="3" width="70" height="10" />
    <rect x="140" y="70" rx="3" ry="3" width="20" height="10" />
    <rect x="10" y="90" rx="3" ry="3" width="90" height="10" />
    <rect x="110" y="90" rx="3" ry="3" width="70" height="10" />
    <rect x="10" y="110" rx="3" ry="3" width="70" height="10" />
    <rect x="90" y="110" rx="3" ry="3" width="60" height="10" />
</Placeholder>

Development

git clone git@github.com:whizzes/svelte-notifications.git
cd ./svelte-notifications
npm i
npm run dev

Contributing

Feel free to open pull requests or issues on our GitHub Repository.

Top categories

Loading Svelte Themes