项目详情
由
分享


HelloGitHub 评分
0 人评分
开源•MIT
认领
讨论
收藏
分享
168
星数
否
中文
JavaScript
主语言
否
活跃
1
贡献者
0
Issues
是
组织
无
最新版本
20
Forks
MIT
协议
更多

通过 SVG 元素去描述去骨骼图的占位元素。支持 JSX 让编写 SVG 无差别化、复用 SVG 片段、类组件化模式。让交互变得更加人性化,适合当下技术流行趋势,2KB 的大小根本不必担心加载问题。示例代码如下:
```javascript
import SVGSkeleton from 'svg-skeleton';
const { h, render } = SVGSkeleton;
// 内置 #shining 动画
const Item = (
<svg width="750" height="191">
<circle cx="95" cy="102" r="63" fill="#edeff0" mask="url(#shining)" ></circle>
<rect width="160" height="35" x="190" y="45" fill="#edeff0" mask="url(#shining)" ></rect>
<rect width="400" height="35" x="190" y="90" fill="#edeff0" mask="url(#shining)" ></rect>
<line x1="0" y1="190" x2="750" y2="190" stroke="#edeff0"></line>
</svg>
);
const Page = ( ( ) => {
let List = [ ];
for ( let i = 0; i < 6; i++ ) {
List.push( ( <Item y={ i == 0 ? 0 : i * 191 } ></Item> ) );
}
return (
<svg width="750" height="1334" fill="#fafafa">
{ List }
</svg>
);
} )( );
render( Page, document.body );
```
收录于:
第 25 期
评论
评分:
暂无精选评论