svelte-skeleton-loader

Svelte-Skeleton-Loader

Make beautiful, animated loading skeletons that automatically adapt to your app. Written for svelte from react-loading-skeleton

Basic usage

Install by npm/yarn with svelte-loading-skeleton.

<script>
  import Skeleton from 'svelte-loading-skeleton';
</script>

<Skeleton/> // Simple, single-line loading skeleton
<Skeleton count={5}/> // Five-line loading skeleton

Principles

Adapts to the styles you have defined

The <Skeleton> component is designed to be used directly in your components, in place of content while it's still loading. Unlike other libraries, rather than meticulously crafting a skeleton screen to match the font-size, line-height or margins your content takes on, use a <Skeleton> component to have it automatically fill the correct dimensions.

For example:

<script>
  import Skeleton from 'svelte-loading-skeleton';
</script>

<div style="font-size: 20; line-height:2;">
{#if title && body}
  <h1>{title}</h1>
  {body}
</div>
{:else}
   <h1><Skeleton /></h1>
   <Skeleton count={10} />
{/if}

...will produce the correctly-sized skeletons for the heading and body sections without any further configuration of the <Skeleton> component.

This ensures the loading state remains up-to-date with any changes to your layout or typography.

Don't make dedicated skeleton screens

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.
2. 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.

Theming

Using a <SkeletonTheme> component, you can easily change the colors of all skeleton components below it in the Svelte hierarchy:

<script>
import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
</script>

<SkeletonTheme color="#202020" highlightColor="#444">
  <p>
    <Skeleton count={3} />
  </p>
</SkeletonTheme>;

Count

count: Number, defaults to 1

<Skeleton count={5} />

Number of loading skeleton lines.

Duration

<Skeleton duration={2} />

duration: Number, defaults to 1.2

Duration is how long it takes do one cycle of the skeleton animation.

Width

width: Number | String | null, defaults to null

<Skeleton width={100} />

Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own.

Height

height: Number | String | null, defaults to null

<Skeleton height={100} />

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

wrapper: svelte:component | null, defaults to null

<style>
  a {
    border: "1px solid #ccc",
    display: "block",
    font-size: 16,
    line-height: 2,
    padding: 20,
    margin-bottom: 10,
    width: 100,
  }
</style>
  <a>
    <slot />
  </a>

<Skeleton wrapper={Box} />

Prop for wrap the skeleton in a custom component.

Circle

circle: Boolean, defaults to false

<Skeleton circle={true} height={50} width={50} />

Prop for making the skeleton look like a circle, for when you are creating a user card with a profile picture for instance.

ClassName

class: String, defaults to ""

<Skeleton class='foobar' />

Prop for adding custom CSS classname to the skeleton.