Socket
Socket
Sign inDemoInstall

@skeleton-elements/svelte

Package Overview
Dependencies
0
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@skeleton-elements/svelte

Skeleton elements (aka UI Skeletons, Skeleton Screens, Ghost Elements) are representations of UI that will be available (loaded) soon. They are designed to improve perceived performance.


Version published
Maintainers
1
Weekly downloads
10
increased by150%

Weekly downloads

Readme

Source

Skeleton Elements Svelte

Skeleton elements (aka UI Skeletons, Skeleton Screens, Ghost Elements) - UI for improved perceived performance

  • Documentation
  • Installation
  • Styles
  • Components
  • Usage
  • Contribution
  • Licence

Documentation

See the documentation with examples and API documentation.

Installation

With npm:

npm i @skeleton-elements/svelte --save

Styles

Skeleton Elements requires stylesheet to be included:

<link rel="stylesheet" href="path/to/skeleton-elements.css>

Wiht bunder (like webpack) you can import syles directly from JavaScript:

import '@skeleton-elements/svelte/skeleton-elements.css';

Or it can be included for each component separately:

  • @skeleton-elements/svelte/skeleton-avatar.css - Avatar component
  • @skeleton-elements/svelte/skeleton-block.css - Block component
  • @skeleton-elements/svelte/skeleton-image.css - Image component
  • @skeleton-elements/svelte/skeleton-text.css - Text component
  • @skeleton-elements/svelte/skeleton-effects.css - Effects

SCSS

SCSS styles are also included:

  • @skeleton-elements/svelte/skeleton-elements.scss - All styles
  • @skeleton-elements/svelte/skeleton-avatar.scss - Avatar component
  • @skeleton-elements/svelte/skeleton-block.scss - Block component
  • @skeleton-elements/svelte/skeleton-image.scss - Image component
  • @skeleton-elements/svelte/skeleton-text.scss - Text component
  • @skeleton-elements/svelte/skeleton-effects.scss - Effects

Components

The following components are available:

  • SkeletonAvatar - responsive avatar placeholder
  • SkeletonBlock - block placeholder
  • SkeletonImage - responsive image placeholder
  • SkeletonText - skeleton text (uses custom Skeleton font)

Usage

See the documentation for more examples and API documentation.

<div id="app">
  ...
  {#if loading}
    <div class="user">
      <div class="user-avatar">
        <SkeletonAvatar effect="fade" size={120} />
      </div>
      <div class="user-name">
        <SkeletonText effect="fade">John Doe</SkeletonText>
      </div>
    </div>
  {/if}
  ...
</div>
<script>
  // import Skeleton components
  import { SkeletonAvatar, SkeletonText } from '@skeleton-elements/svelte';

  // import Skeleton styles
  import '@skeleton-elements/svelte/skeleton-elements.css';

  let loading = true;
</script>

Contribution

Yes please! See the contributing guidelines for details.

Licence

This project is licensed under the terms of the MIT license.

Keywords

FAQs

Last updated on 04 Sep 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc