Make beautiful, animated loading skeletons that automatically adapt to your app. Written for svelte from [react-loading-skeleton](https://github.com/dvtng/react-loading-skeleton)
npm install svelte-skeleton-loaderMake beautiful, animated loading skeletons that automatically adapt to your app.
Written for svelte from react-loading-skeleton
Install by npm/yarn with svelte-loading-skeleton.
``javascript
`
The component is designed to be used directly in your components,font-size
in place of content while it's still loading.
Unlike other libraries, rather than meticulously crafting a skeleton screen to
match the , line-height or margins your content takes on,
use a component to have it automatically fill the correct dimensions.
For example:
`javascript
`
...will produce the correctly-sized skeletons for the heading and body sections
without any further configuration of the component.
This ensures the loading state remains up-to-date with any changes
to your layout or typography.
Instead, make components with _built-in_ skeleton states.
In addition to keeping the styling in-sync, here are some other reasons to do this:
1. Components represent all possible states it can be in - loading included.
1. It allows for more flexible loading patterns - in the example, it's possible to have the title load first, and then the body, while having both pieces of content show loading skeletons at the right time.
Using a component, you can easily change the colors of all
skeleton components below it in the Svelte hierarchy:
`javascript
`
count: Number, defaults to 1
`javascript`
Number of loading skeleton lines.
`javascript`
duration: Number, defaults to 1.2
Duration is how long it takes do one cycle of the skeleton animation.
width: Number | String | null, defaults to null
`javascript`
Width of the skeleton. Useful when the skeleton is inside an inline element with
no width of its own.
height: Number | String | null, defaults to null
`javascript`
Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance
a card. Also needed for the prop circle (see below).
wrapper: svelte:component | null, defaults to null
`
Prop for wrap the skeleton in a custom component.
circle: Boolean, defaults to false
`javascript`
Prop for making the skeleton look like a circle, for when you are creating a user card with a profile picture for instance.
class: String, defaults to ""
`javascript``
Prop for adding custom CSS classname to the skeleton.