## Why
Skeletal screen, we are no stranger to, and the biggest existence of the skeletal screen is due to the page rendering out of content for a long time, and use it to occupy the page, users to reduce the time to perceive white screen.
If the skeletal screen depend on core frameworks such as React / Vue, it will inevitably first need to parse the core library before rendering to the skeletal screen, which is undoubtedly not the best choice.
**SVG-Skeleton** is exactly what we've been looking for.
By SVG elements to describe the placeholder elements of the skeletal diagram, support JSX write SVG indifference, reuse SVG fragments, component-based mode.
[简体中文](./README.zh-CN.md)
## Installing
```sh
npm i svg-skeleton --save
```
or
```html
```
## Usage
### JSX Code
```js
import SVGSkeleton from 'svg-skeleton';
const { h, render } = SVGSkeleton;
// inside #shining animation
const Item = (
);
const Page = ( ( ) => {
let List = [ ];
for ( let i = 0; i < 6; i++ ) {
List.push( ( ) );
}
return (
);
} )( );
render( Page, document.body );
```
### Output
## Diff
In order to try to position the elements of the bone screen the same as the design draft, you need the Diff function.
### Code
```js
const { diff } = SVGSkeleton;
render( diff( Page, require('./list.png') ), document.body );
```
### Output
## Depend on [JSX & h](https://www.npmjs.com/package/babel-plugin-transform-react-jsx)
the setting will be similar to
```json
{
"plugins": [
[ "transform-react-jsx", { "pragma": "h" } ]
]
}
```
## License
[MIT](./LICENSE)
