Example LinearProgress Component

import React, {Component} from 'react';
import { connect } from 'react-redux';
import classNames from 'classnames';
import '@material/linear-progress/dist/mdc.linear-progress.css';

class LinearProgress extends Component {

  render() {

    // Get state of linear progress to control its display
    const { linearProgress } = this.props;

    var lpClasses = classNames({
      'mdc-linear-progress--closed': linearProgress.closed,
    });

    //console.log("Should Loader Be Closed?", linearProgress.closed);

    return(
      <div role="progressbar" ref="progressBar" className={`mdc-linear-progress mdc-linear-progress--indeterminate ${lpClasses}`}>
        <div className={"mdc-linear-progress__buffering-dots"}></div>
        <div className={"mdc-linear-progress__buffer"}></div>
        <div className={"mdc-linear-progress__bar mdc-linear-progress__primary-bar"}>
          <span className={"mdc-linear-progress__bar-inner"}></span>
        </div>
        <div className={"mdc-linear-progress__bar mdc-linear-progress__secondary-bar"}>
          <span className={"mdc-linear-progress__bar-inner"}></span>
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  linearProgress: state.linearProgress
})

export default connect(mapStateToProps, null)(LinearProgress);