nolimits4web
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 --saveStyles
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 stylesskeleton-elements/css/core- Core stylesskeleton-elements/css/block- Block componentskeleton-elements/css/text- Text componentskeleton-elements/css/image- Image componentskeleton-elements/css/avatar- Avatar componentskeleton-elements/css/effects- Effects
SCSS
SCSS styles are also included:
skeleton-elements/scss- All stylesskeleton-elements/scss/core- Core stylesskeleton-elements/scss/block- Block componentskeleton-elements/scss/text- Text componentskeleton-elements/scss/image- Image componentskeleton-elements/scss/avatar- Avatar componentskeleton-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.