.terra-ProgressGroup {
  flex: auto;
  display: flex;
  background: #d3d4d5;
  flex-direction: row;
  border-radius: 0.5em;
  overflow: auto;
  animation-delay: 3s;
}

.terra-ProgressGroup div {
  transform: translateX(-100%);
  animation: loadbar 3s forwards;
  -webkit-animation: loadbar 3s forwards;
  opacity: 0;
}

@keyframes loadbar {
  0% {
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.terra-ProgressGroup--progress {
  // flex: 1 1 auto;
  border-radius: 0em;
  padding-right: 1px;
  animation-delay: 3s;
  // background-color: #ffffff;
}

.terra-ProgressGroup--progress:not(:first-child){
  // background-color: #ffffff;
  // padding-right: 1px;
}

const ProgressBar = (props, {...customProps}) => {

    const classes = classNames([
        { [`terra-ProgressBar--${props.heightSize}`]: props.heightSize },
        customProps.className,
    ]);
    const GroupProgressBar = [];
    props.groups.map((group, i) => {

        const widthValue = (group.value / group.max) * 100;

        GroupProgressBar.push

        (<div style={{width: `${widthValue}%`,
            height: '50px',}}
      key = {i}
      className={`well-background--${group.concept}`}>
        </div>);
    })
    // console.log(GroupProgressBar);
    return <div className='terra-ProgressGroup'> {GroupProgressBar} </div>
}