https://github.com/yyued/svg-skeleton
Create the skeleton screen through SVG element
https://github.com/yyued/svg-skeleton
javascript
Last synced: 5 months ago
JSON representation
Create the skeleton screen through SVG element
- Host: GitHub
- URL: https://github.com/yyued/svg-skeleton
- Owner: yyued
- License: mit
- Created: 2018-01-16T06:51:19.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-31T02:14:00.000Z (about 8 years ago)
- Last Synced: 2024-04-24T14:20:12.872Z (almost 2 years ago)
- Topics: javascript
- Language: JavaScript
- Homepage: https://svg-skeleton.js.org/
- Size: 1.38 MB
- Stars: 165
- Watchers: 12
- Forks: 21
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
SVG-Skeleton
## 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 (
{ List }
);
} )( );
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)