下拉刷新
项目详情
navbar_avatar分享
repo_avatar
HelloGitHub 评分
0 人评分
通过 SVG 元素去描述去骨骼图的占位元素
开源MIT
认领
收藏
分享
168
星数
中文
JavaScript
主语言
活跃
1
贡献者
0
Issues
组织
最新版本
20
Forks
MIT
协议
更多
SVG-Skeleton image
通过 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 期

评论

评分:
暂无精选评论