Skeleton Elements
Skeleton elements (aka UI Skeletons, Skeleton Screens, Ghost Elements) - UI for improved perceived performance
Documentation
See the documentation with examples and API documentation.
Installation
With npm:
npm i skeleton-elements --save
Styles
Skeleton Elements requires stylesheet to be included:
<link rel="stylesheet" href="path/to/skeleton-elements.css" />
With bundler (like webpack) you can import styles directly from JavaScript:
import 'skeleton-elements/css';
Or it can be included for each component separately:
-
skeleton-elements/css
- All styles -
skeleton-elements/css/core
- Core styles -
skeleton-elements/css/block
- Block component -
skeleton-elements/css/text
- Text component -
skeleton-elements/css/image
- Image component -
skeleton-elements/css/avatar
- Avatar component -
skeleton-elements/css/effects
- Effects
SCSS
SCSS
styles are also included:
-
skeleton-elements/scss
- All styles -
skeleton-elements/scss/core
- Core styles -
skeleton-elements/scss/block
- Block component -
skeleton-elements/scss/text
- Text component -
skeleton-elements/scss/image
- Image component -
skeleton-elements/scss/avatar
- Avatar component -
skeleton-elements/scss/effects
- Effects
Usage
See the documentation for more examples and API documentation.
<style>
.user-avatar .skeleton-block {
width: 120px;
height: 120px;
border-radius: 50%;
}
</style>
<div id="app">
...
<div class="user">
<div class="user-avatar">
<div class="skeleton-block skeleton-effect-fade"></div>
</div>
<div class="user-name">
<span class="skeleton-text skeleton-effect-fade">John Doe</span>
</div>
</div>
...
</div>
Contribution
Yes please! See the contributing guidelines for details.
Licence
This project is licensed under the terms of the MIT license.