Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@skeleton-elements/svelte
Advanced tools
Changelog
2.0.0
Readme
Skeleton elements (aka UI Skeletons, Skeleton Screens, Ghost Elements) - UI for improved perceived performance
See the documentation with examples and API documentation.
With npm:
npm i @skeleton-elements/svelte --save
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
- EffectsSCSS
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
- EffectsThe following components are available:
SkeletonAvatar
- responsive avatar placeholderSkeletonBlock
- block placeholderSkeletonImage
- responsive image placeholderSkeletonText
- skeleton text (uses custom Skeleton font)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>
Yes please! See the contributing guidelines for details.
This project is licensed under the terms of the MIT license.
FAQs
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.
The npm package @skeleton-elements/svelte receives a total of 19 weekly downloads. As such, @skeleton-elements/svelte popularity was classified as not popular.
We found that @skeleton-elements/svelte demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.