Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nikbabchenko/skeleton-webcomponent
https://github.com/nikbabchenko/skeleton-webcomponent
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/nikbabchenko/skeleton-webcomponent
- Owner: nikbabchenko
- License: mit
- Created: 2020-10-16T21:23:06.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-01-09T15:24:17.000Z (almost 2 years ago)
- Last Synced: 2024-09-27T07:22:09.354Z (3 months ago)
- Language: TypeScript
- Size: 229 KB
- Stars: 16
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://stand-with-ukraine.pp.ua)
# Skeleton Loader Webcomponent
**Skeleton Loader** is a very lightweight (less than **5kb** gzip) webcomponent to make beautiful, animated loading skeletons in any web app - pure html/css/js or Angular/React.
> Spinners and loaders have traditionally been the way to tell users
> that content is going to take a while to load. While this approach is
> great, it’s quickly becoming obsolete in modern development. Skeleton
> screens are becoming the perfect replacement for traditional loaders
> because they focus on progress rather than wait times, hence reducing
> loading-time frustration...
-- [#Smashing Magazine - Implementing Skeleton Screens In React ](https://www.smashingmagazine.com/2020/04/skeleton-screens-react/)
## Demos
[Skeleton Loader Home Page](https://skeleton-webcomponent-loader.web.app/)
### Install
You can get it on NPM installing `skeleton-webcomponent-loader` as a project dependency or via UNPKG
npm i skeleton-webcomponent-loader
#### Script tag via UNPKG (global npm delivery network)
#### Script tag via npm
#### ESM import (Webpack/Browsers which support ES modules/Angular/React)
import {defineCustomElements as initSkeleton} from './node_modules/skeleton-webcomponent-loader/loader/index.js';
initSkeleton();
#### Angular
In app.module.ts or any module which uses skeleton in order to provide ability to use webcomponents:
@NgModule({
//whatever you have on app module goes here...
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}
And in **main.ts:** or you can add it via **stript tags** in index.html as described before
import { defineCustomElements as initSkeleton } from 'skeleton-webcomponent-loader/loader';
initSkeleton();
### How to use?
- Add to the page
- Put to the html/jsx/whatever...
Pass properties and see it in action
### Properties
| Property | Attribute | Description | Type | Default |
| -------------- | --------------- | ------------------------------------------------------------------- | ----------------------------------------------------- | ------------ |
| `animation` | `animation` | Animation type | `"false" | "progress" | "progress-dark" | "pulse"` | `'progress'` |
| `count` | `count` | Number of rows of current skeleton type | `number` | `1` |
| `customStyles` | `custom-styles` | Custom css styles (background/margins/width/height etc.) | `string | { [key: string]: string; }` | `{}` |
| `height` | `height` | Height of the skeleton ex. 100px, 100%, auto etc. | `string` | `null` |
| `showWarnings` | `show-warnings` | Whether to show warnings for the wrong animation type/custom styles | `boolean` | `true` |
| `variant` | `variant` | Variant of the skeleton - circle or row | `"circle" | "rect" | "text"` | `'text'` |
| `width` | `width` | Width of the skeleton ex. 100px, 100%, auto etc. | `string` | `null` |
### CSS Custom Properties
| Name | Description |
| -------------------------- | --------------------------------------------------------------------- |
| `--skeleton-background` | Skeleton background: Default: #eff1f6 |
| `--skeleton-border-radius` | Skeleton border-radius: Default: 4px for the row, 50% for the circle |
| `--skeleton-height` | Skeleton height: Default: 20px for the row, 40px for the circle |
| `--skeleton-margin-bottom` | Skeleton margin-bottom: Default: 10px for the row, 5px for the circle |
| `--skeleton-width` | Skeleton width: Default: 100% for the row, 40px for the circle |
Inspired by [ngx-skeleton-loader](https://github.com/willmendesneto/ngx-skeleton-loader)