Nocturnal Pumpkin Maelstrom

    svelte-skeleton

    1.3.1 • Public • Published

    svelte-skeleton

    NPM version NPM downloads Svelte v3

    Simple implementation of SVG skeletons in Svelte 3

    example

    🚀 Features

    This is Svelte's component to create custom SVG skeletons to improve level of UX of loading images and interface.

    • Easy to use (Svelte component allow to use any SVG forms, such as <rect /> and <circle />)
    • Fully customizable: you can adjust the colors, sizes and speed 🦖
    • Works fine with SSR
    • Light size 🔥
    • Pure SVG: any custom SVG shapes can be used
    • All backgrounds within one Svelte component will be synchronized

    P.S. It's recommended to use this package only for middle or large images. If you want to achieve the best UX for icons, use this package with animate = false. Also you can use svelte-image-loader (NPM package) to smooth the moment the image appears.

    Install

    npm i svelte-skeleton

    Usage

    Please note that you should import .svelte file to compile it with your project's Svelte version (you can use compiled svelte-skeleton/index.js, but there could be errors with different versions of Svelte in your project and in this package)

    <script>
      import Skeleton from 'svelte-skeleton/Skeleton.svelte'
    
      ...
    </script>
    
    <Skeleton height="360" width="360">
      <rect width="96" height="72" x="0" y="0" rx="12" ry="12" />
      <rect width="260" height="10" x="108" y="19" rx="5" ry="5" />
      <rect width="150" height="10" x="108" y="43" rx="5" ry="5" />
    
      <rect width="96" height="72" x="0" y="96" rx="12" ry="12" />
      <rect width="260" height="10" x="108" y="115" rx="5" ry="5" />
      <rect width="150" height="10" x="108" y="139" rx="5" ry="5" />
    
      <!-- Any custom SVG shapes -->
    </Skeleton>

    Also you can combine it with Svelte's {#await ...}:

    {#await promise}
    <!-- promise is pending -->
    <Skeleton height="360" width="360">
      <rect width="96" height="72" x="0" y="0" rx="12" ry="12" />
      <rect width="260" height="10" x="108" y="19" rx="5" ry="5" />
      <rect width="150" height="10" x="108" y="43" rx="5" ry="5" />
    </Skeleton>
    {:then value}
    <!-- promise was fulfilled -->
    <YourCoolComponent {value} />
    {:catch error}
    <!-- promise was rejected -->
    <Error title="{error.message}" />
    {/await}

    API

    Parameters

    Name Type Default Description
    primaryColor string '#ebecef' Main background color
    secondaryColor string '#f5f5f7' Animation line color
    height number 200
    width number 400
    speed number 2
    animate boolean true
    secondaryColorPercentWidth number 100 Initial secondaryColor-part offset
    ariaLabel string null Aria Label

    Please note that some older browsers (like Internet Explorer 11) do not support SVG animations. They will only show the background color without the animation line. To create skeletons for these browsers, you need to write your own CSS animations.

    License

    MIT © Denis Stasyev

    Install

    npm i svelte-skeleton

    DownloadsWeekly Downloads

    315

    Version

    1.3.1

    License

    MIT

    Unpacked Size

    50.3 kB

    Total Files

    6

    Last publish

    Collaborators

    • denisstasyev