https://github.com/denisstasyev/svelte-skeleton

Simple implementation of SVG skeletons in Svelte 3 :cat:
https://github.com/denisstasyev/svelte-skeleton

component skeleton svelte svelte3 svg

Last synced: 27 days ago
JSON representation

Simple implementation of SVG skeletons in Svelte 3 :cat:

• Host: GitHub
• URL: https://github.com/denisstasyev/svelte-skeleton
• Owner: denisstasyev
• Created: 2020-08-12T20:23:02.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2022-06-09T08:55:12.000Z (over 2 years ago)
• Last Synced: 2024-09-29T12:02:41.343Z (about 1 month ago)
• Topics: component, skeleton, svelte, svelte3, svg
• Language: Svelte
• Homepage:
• Size: 21.5 KB
• Stars: 44
• Watchers: 3
• Forks: 5
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# svelte-skeleton

[![NPM version](https://img.shields.io/npm/v/svelte-skeleton.svg?style=flat)](https://www.npmjs.com/package/svelte-skeleton) [![NPM downloads](https://img.shields.io/npm/dm/svelte-skeleton.svg?style=flat)](https://www.npmjs.com/package/svelte-skeleton) [![Svelte v3](https://img.shields.io/badge/svelte-v3-blueviolet.svg)](https://svelte.dev)

Simple implementation of SVG skeletons in Svelte 3

![example](https://user-images.githubusercontent.com/25938785/90191444-8f443b80-ddc9-11ea-918f-da77070549b8.gif)

## :rocket: 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 `` and ``)

- Fully customizable: you can adjust the colors, sizes and speed :t-rex:

- Works fine with SSR

- Light size :fire:

- 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](https://github.com/denisstasyev/svelte-image-loader) ([NPM package](https://www.npmjs.com/package/svelte-image-loader)) to smooth the moment the image appears.

## Install

```bash

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)

```html

  import Skeleton from 'svelte-skeleton/Skeleton.svelte'

  ...

  

  

  

  

  

  

  

```

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

```html

{#await promise}

  

  

  

{:then value}

{:catch error}

{/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](https://github.com/denisstasyev)