Skip to content

Instantly share code, notes, and snippets.

@anikethsaha
Last active May 28, 2018 14:16
Show Gist options
  • Save anikethsaha/b73cdaefc8185e734f75480a5d9dbd5f to your computer and use it in GitHub Desktop.
Save anikethsaha/b73cdaefc8185e734f75480a5d9dbd5f to your computer and use it in GitHub Desktop.
To create pre-loading of a component in ReactJS using reactJS lifecycle
import React from "react"
import LoadedDiv from './Loaded.js'
import PreLoadDiv from './preload-content.js'
export default class App extends React.Component{
constructor(props){
super(props);
this.state ={ loading : false};
}
componentWillMount(){
this.setState({ // re-renders the component everytime setState is called
loading:true
})
}
componentDidMount(){
this.setState({ // re-renders the component everytime setState is called
loading:false
})
}
preLoadingTemplate(){
return <div><PreLoadDiv /></div>;
}
postLoadingTemplate(){
return <div><LoadedDIv /></div>;
}
render(){
if(this.state.loading){
return this.preLoadingTemplate();
}
return this.postLoadingTemplate();
}
}
import React from 'react';
export default class LoadedDiv extends React.Component{
render(){
return (
<div >
<div className="container">
<h1>Loaded Completly</h1>
</div>
</div>
)
}
}
// Credit for the UI of this Div to https://github.com/sidhantpanda . The CodePen Link https://codepen.io/sidhantpanda/pen/VpXdKW
import React from 'react';
export default class PreLoadDiv extends React.Component{
render(){
return (
<div className="postLoadCard content-div">
<div className="bodyWrap">
<div className="loadingAnim"></div>
<div className="loadingAnim"></div>
<div className="loadingAnim"></div>
<div className="loadingAnim"></div>
</div>
<div className="footerWrap"></div>
</div>
)
}
}
/* styling .css content copy from here
.postLoadCard {
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
border: 1px solid rgba(0, 0, 0, .09);
border-color: transparent;
background: rgba(255, 255, 255, .8);
margin: 0 0 18px
}
.postLoadCard .bodyWrap {
padding: 20px 16px 0
}
.postLoadCard .bodyWrap .loadingAnim {
margin: 0 0 16px;
max-width: 500px
}
.postLoadCard .bodyWrap .loadingAnim:first-child {
padding: 16px;
max-width: 90%;
}
.postLoadCard .bodyWrap .loadingAnim:last-child {
padding: 8px;
max-width: 250px
}
.postLoadCard .footerWrap {
margin: 24px 0 0;
padding: 24px 0
}
.postLoadCard .loadingAnim {
padding: 6px;
width: 100%;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: linear-gradient(90deg, rgba(207, 216, 220, .15), rgba(207, 216, 220, .35), rgba(207, 216, 220, .15));
-webkit-animation: loadanimation 1.4s ease infinite;
-moz-animation: loadanimation 1.4s ease infinite;
animation: loadanimation 1.4s ease infinite;
background-size: 600% 600%
}
.content-div{
background-color:white;
width:50%;
margin:auto;
}
@-webkit-keyframes loadanimation {
0% {
background-position: 0 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0 50%
}
}
@-moz-keyframes loadanimation {
0% {
background-position: 0 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0 50%
}
}
@keyframes loadanimation {
0% {
background-position: 0 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0 50%
}
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment