react-js-loading-shimmer
v1.0.10
Published
ReactJs Shimmer is an easy way to add a shimmering effect to any view in your web page. It's useful as an unobtrusive loading indicator.
Downloads
551
Readme
react-js-loading-shimmer
ReactJs Shimmer is an easy way to add a shimmering effect to any view in your web page. It's useful as an unobtrusive loading indicator.
Install
npm install --save react-js-loading-shimmerUsage
import React, { Component } from 'react';
import Shimmer from 'react-js-loading-shimmer';
class App extends Component {
render() {
return (
<div className="App container">
<h1 style={{textAlign:"center"}}>Shimmer Loader</h1>
<div className="row">
<div className="col-sm-4 col-11">
<div className="content-grid">
<div className="box-mask">
<Shimmer height={"183px"} className={"class_name_test"}/>
</div>
<div className="box-containt-mask">
<div className="text1">
<div className={"row"}>
<div className={"col-sm-4"}><Shimmer height={"50px"}/></div>
<div className={"col-sm-8"}><Shimmer height={"25px"}/><Shimmer
height={"25px"}/></div>
</div>
</div>
<table className="table">
<tbody>
<tr>
<td className="align-middle">
<Shimmer/> <br/><Shimmer/></td>
<td className="align-middle">
<Shimmer/> <br/><Shimmer/></td>
<td className="align-middle">
<Shimmer/> <br/><Shimmer/></td>
</tr>
<tr>
<td className="align-middle">
<Shimmer/> <br/><Shimmer/></td>
<td className="align-middle">
<Shimmer/> <br/><Shimmer/>
</td>
<td className="align-middle">
<Shimmer/> <br/><Shimmer/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div className="col-sm-4 col-11">
<div className="content-grid">
<div className="box-mask">
<Shimmer height={"183px"} className={"class_name_test"}/>
</div>
<div className="box-containt-mask">
<div className="text1">
<div className={"row"}>
<div className={"col-sm-4"}><Shimmer height={"50px"}/></div>
<div className={"col-sm-8"}><Shimmer height={"25px"}/><Shimmer
height={"25px"}/></div>
</div>
</div>
<table className="table">
<tbody>
<tr>
<td className="align-middle">
<Shimmer/> <br/><Shimmer/></td>
<td className="align-middle">
<Shimmer/> <br/><Shimmer/></td>
<td className="align-middle">
<Shimmer/> <br/><Shimmer/></td>
</tr>
<tr>
<td className="align-middle">
<Shimmer/> <br/><Shimmer/></td>
<td className="align-middle">
<Shimmer/> <br/><Shimmer/>
</td>
<td className="align-middle">
<Shimmer/> <br/><Shimmer/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div className="col-sm-4 col-11">
<div className="content-grid">
<div className="box-mask">
<Shimmer height={"183px"}/>
</div>
<div className="box-containt-mask">
<div className="text1">
<div className={"row"}>
<div className={"col-sm-4"}><Shimmer height={"50px"}/></div>
<div className={"col-sm-8"}><Shimmer height={"25px"}/><Shimmer
height={"25px"}/></div>
</div>
</div>
<table className="table">
<tbody>
<tr>
<td className="align-middle">
<Shimmer/> <br/><Shimmer/></td>
<td className="align-middle">
<Shimmer/> <br/><Shimmer/></td>
<td className="align-middle">
<Shimmer/> <br/><Shimmer/></td>
</tr>
<tr>
<td className="align-middle">
<Shimmer/> <br/><Shimmer/></td>
<td className="align-middle">
<Shimmer/> <br/><Shimmer/>
</td>
<td className="align-middle">
<Shimmer/> <br/><Shimmer/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default App;
Demo
[
]
License
MIT © jenzri-nizar