Progress [value] style with response

Question

I need a progress indicator, which is a multi-bar. Looks like that:

[----------][----50%    ][        ]
[---20%    ][           ][        ]
[----------][-----------][---80%  ]

It has three distinctive parts: RED-GREEN-RED:

[ RED RED  ][GREEN GREEN][ RED RED]

This is in real time, the value comes from the remote json api, if the value is in the green zone, everything is in order, otherwise the action required from colleagues (if it is under the desired zone or above it).

So far I have implemented html + css, works fine in Firefox and Chrome. Here is a jsfiddle demo project:

• 20% - https://jsfiddle.net/jws0jh6w/1/
• 50% - https://jsfiddle.net/0458cbgw/1/
• 80% - https://jsfiddle.net/4cLa8kra/

Now I need to "reactivate" the code in order to be alive :)

The problem is that I cannot embed the style in the following CSS rule:

    progress[value]::-webkit-progress-value { /* Chrome */
  background-image:
    -webkit-linear-gradient(
      135deg,
      transparent 33%,
      rgba(0, 0, 0, 0.1) 33%,
      rgba(0, 0, 0, 0.1) 66%,
      transparent 66%
    ),
    -webkit-linear-gradient(
      top,
      rgba(255, 255, 255, 0.25),
      rgba(0, 0, 0, 0.25)
    ),
    -webkit-linear-gradient(
      left,
      rgba(255,0,0,0.8),
      rgba(255,0,0,0.8) 37.5%,
      rgba(0,255,0,0.8) 37.5%,
      rgba(0,255,0,0.8) 87.5%,
      rgba(255,0,0,0.8) 87.5%
    );
}

Progressbar.js :

const Progressbar = ({percent, min, max}) => {

  let styleProgress = {  backgroundImage:
    `linear-gradient(
      90deg,
      rgba(255,0,0,0.1),
      rgba(255,0,0,0.1) ${min}%,
      rgba(0,255,0,0.1) ${min}%,
      rgba(0,255,0,0.1) ${max}%,
      rgba(255,0,0,0.1) ${max}%)`
  };

  return(
      <div className="wrapper-progressbar">
        <progress style={styleProgress} max="100" value={percent}>
        </progress>
      </div>
  );
};

( min max ), .

- , css React?

ps: Chrome Firefox, ( ). IE . html5 <progress> imho.

: : https://jsfiddle.net/ave0x0nb/3/

( 0-30%), ( 0-30%, 30-70%) ( 0-30%, 30-70%, 70-100%) . , 50%, (0-30% 30-50% ).

(, , ), ( ) . . jsfiddle 20%, 50% 80% .

Update2: .

Answer 1

function updateValue(){
	const progress = document.querySelector('progress');  
  progress.value = Math.round(Math.random()*100) + 1;
  console.log(progress.value);
}

const interval = setInterval(updateValue, 500);

setTimeout(function () {
	clearInterval(interval);
}, 4000);

.wrapper-progressbar {
  flex: 1;
}

progress {
  width: 100%;
  background-image:
    linear-gradient(
      90deg,
      rgba(255,0,0,0.1),
      rgba(255,0,0,0.1) 30%,
      rgba(0,255,0,0.1) 30%,
      rgba(0,255,0,0.1) 70%, 
      rgba(255,0,0,0.1) 70%);
  border: 0;
  height: 2em;
  border-radius: 9px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
}

progress[value]::-webkit-progress-bar {
  width: 100%;
  background: transparent;
  background-image:
    -webkit-linear-gradient(
      left,
      rgba(255,0,0,0.1),
      rgba(255,0,0,0.1) 30%,
      rgba(0,255,0,0.1) 30%,
      rgba(0,255,0,0.1) 70%,
      rgba(255,0,0,0.1) 70%);
  border: 0;
  height: 2em;
  border-radius: 9px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
}

progress[value] {
  background-color: transparent;
  border-radius: 5px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
  position: relative;
  /* Reset the default appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Get rid of default border in Firefox. */
  /*border: none;*/
}

progress[value]::-moz-progress-bar { /* Firefox */
  border-radius: 2px;
  background-size: 65px, 100%, 100%;
  background-color: transparent;
  background-image:
    -moz-linear-gradient(
      135deg,
      transparent 33%,
      rgba(0, 0, 0, 0.1) 33%,
      rgba(0, 0, 0, 0.1) 66%,
      transparent 66%
    ),
    -moz-linear-gradient(
      top,
      rgba(255, 255, 255, 0.25),
      rgba(0, 0, 0, 0.25)
    ),
    -moz-linear-gradient(
      left,
      rgba(255,0,0,0.8),
      rgba(255,0,0,0.8) 100%,
      rgba(0,255,0,0.8) 100%,
      rgba(0,255,0,0.8) 100%,
      rgba(255,0,0,0.8) 100%
    );
}

progress[value]::-webkit-progress-value { /* Chrome */
  border-radius: 2px;
  background-size: 65px, 100%, 100%;
  background-color: transparent;
  background-image:
    -webkit-linear-gradient(
      135deg,
      transparent 33%,
      rgba(0, 0, 0, 0.1) 33%,
      rgba(0, 0, 0, 0.1) 66%,
      transparent 66%
    ),
    -webkit-linear-gradient(
      top,
      rgba(255, 255, 255, 0.25),
      rgba(0, 0, 0, 0.25)
    ),
    -webkit-linear-gradient(
      left,
      rgba(255,0,0,0.8),
      rgba(255,0,0,0.8) 100%,
      rgba(0,255,0,0.8) 100%,
      rgba(0,255,0,0.8) 100%,
      rgba(255,0,0,0.8) 100%
    );
}

    <div className="wrapper-progressbar">
      <progress style={styleProgress} max="100" value="90"></progress>
    </div>

Hide result

Answer 2

classnames npm. (, 20%, 50%, 80%) :

progressBarClass = classNames('defaultClass', {
        'green': props.progress < PROGRESS_VALUE.green,
        'yellow': PROGRESS_VALUE.green < props.progress < PROGRESS_VALUE.yellow,
        'red': props.progress > PROGRESS_VALUE.red
      }),

:

render(){
   return (
       <div classNames={progressBarClass}>{'progress-bar'}</div>   
   );
}

css:

.green {
  //...green styles
}

.yellow {
  //...yellow styles
}


.red {
  //...red styles
}

, . , inline-css, , .