css Loading

// react Part 
import React from 'react'


class About extends React.Component {

  constructor() {
    super()

    this.state = {
      isloading: true
    }
  }


  componentDidMount = () => {
    setTimeout(() => {
      this.setState({ isloading: false })
    }, 3000);
  }


  render() {

    const { isloading } = this.state

    return(
      <div className={`about ${isloading ? 'loading' : ''}`}>
        <h2 className={`heading ${isloading ? 'loading' : ''}`}>
          { isloading ? '' : 'this is about' }
        </h2>
      </div>
    )
  }
}

export default About






// css part 
.about {
  width: 800px;
  height: 450px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  font-size: 36px;
  color: salmon;
  transition: all 0.75s ease-in-out;


  &.loading {
    background: lighten(grey, 35%); 
    animation: bubble 1s ease-in-out infinite;
    transition: all 0.75s ease-in-out;
  }

  .heading {
    width: 380px;
    height: 60px;
    border-radius: 50px;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.75s ease-in-out;

    &.loading {
      background: lighten(grey, 15%);
      animation: bubble 1s ease-in-out;
      transition: all 0.75s ease-in-out;
    }
  }

  
}


@keyframes bubble {
  0% , 100% { opacity: 1; }
  50% {opacity: 0.3;}
}