<div id="app"></app>
.progress{
  height: 10px;
  width: 0%;
  background-color: transparent;
}

.progress.low{
  background-color: red;  
  color:red;
  width: 10%;
}

.progress.medium{
  background-color: orange;
  color: orange;
  width: 50%;
}

.progress.high{
  color: green;
  background-color: green;
  width:100%;
}
View Compiled
class Meter extends React.Component{
  constructor(){
    super();
    this.state={
      status: "low"
    }
  }
  componentDidUpdate(prevprops,state){
    this.changeStatus(this.props.value);
  }
  changeStatus = (value) => {
    switch(value){
      case 10:
        this.setState({
          status: "low"
        })
        break;
       case 50:
        this.setState({
          status: "medium"
        })
        break;
       case 100:
        this.setState({
          status: "high"
        })
        break;
     }
  }
  render(){
    return (
      <span className={`progress ${this.state.status}`}></span>
    )
  }
}

class Password extends React.Component{
  constructor(){
    super();
    this.state = {
      value: 0,
      password:""
    }
  }
  updatePasswordvalue = (ev) => {
    this.setState({
      password: ev.target.value
    });
    this.changeMeterValue();
  }
  changeMeterValue = () => {
    const StrongPassword = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})");
    const MediumPassword = new RegExp("^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})");
    
  if(this.state.password.length === 1){
        this.setState({
        value: 0
      })
   }else{
  if(StrongPassword.test(this.state.password)){
      this.setState({
        value: 100
      })
      
}else{ if(MediumPassword.test(this.state.password)){
      this.setState({
        value: 50
      })
    }else{
      this.setState({
        value: 10
      })
      }
    }
  }
 }
  render(){
    return (
      <div className="d-md-flex flex-column">
        <input type="password" onChange={this.updatePasswordvalue} className="password"/> 
        {this.props.meter ? <Meter value={this.state.value} /> :  <span>No Meter</span>}
        {this.state.value}
      </div>
    )
  }
}

class Application extends React.Component {
  render() {
    return (
      <div class="container">
        <h2 className="text-center mt-5">Password Meter</h2>
        <div className="d-md-flex justify-content-center mt-5"><Password meter={true} /></div>
      </div>
    );
  }
}

/*
 * Render the above component into the div#app
 */
React.render(<Application />, document.getElementById('app'));
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js